html - CSS 问题 - 是什么导致这条垂直线？

Question

只是努力理解代码在哪里导致我的页面上出现一条小的垂直线：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

非常感谢您提供的任何帮助...

Answer 1

它是绘制该线的以下元素：

<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;
}

Answer 2

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>');
}