Проблема CSS - что вызывает эту вертикальную линию?

Question

Проблема CSS - что вызывает эту вертикальную линию?

0

просто пытаясь понять, где код, который вызывает небольшую вертикальную линию, появляющуюся на моей странице: http://www.upreach.org.uk/undergraduates/benefits.php

Кажется, что линия связывает основную навигацию с ветвью суб-навигации, аннотированный снимок экрана здесь: http://upreach.org.uk/old/css-vertical-line.png

Я пытаюсь выяснить, как я хотел бы реализовать ту же строку на другой странице, но не могу заставить ее работать: http://www.upreach.org.uk/undergraduates/is-upReach-for-me. PHP

Большое спасибо за любую помощь, которую вы можете дать...

user2761030 20 сен. 2013, в 11:49

Источник

Теги:

html

css

2 ответа

0

HTML

<span class="anchor">&nbsp;</span>

CSS

#navigation ul li a .anchor {
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 9px;
    background: #333;
    display: block;
    font-size: 0;
    line-height: 0;
    text-indent: -4000px;
}

Это прямо здесь. Однако для этого потребуется дополнительная HTML-разметка. Но вы можете добавить его с jquery, если хотите.

$(document).ready(function() {    
    $("#navigation ul li.active a").append('<span class="anchor">&nbsp;</span>');
}

Bram Vanroy 20 сен. 2013, в 07:29

Ещё вопросы

letiagoalves · Accepted Answer · 2013-09-20T07-32-00.000Z

Его следующий элемент, который рисует эту строку:

<span class="anchor">&nbsp;</span>

в конце следующей ссылки находится страница, которую пользователь видит:

<a href="benefits.php" class="issue-link">
   <span>What We</span>
   Offer
   <span class="anchor">&nbsp;</span> <!-- I am here! -->
</a>

Стиль элемента:

#navigation ul li a .anchor {
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 9px;
    background: #333333;
    display: block;
    font-size: 0;
    line-height: 0;
    text-indent: -4000px;
}

Это отлично, спасибо за столь подробный ответ!