css - 缩短水平边框的链接列表？

Question

我正在尝试这样做:

   a link here
   ------------------
   another link here
   ------------------
>> active link here
   ------------------
   one more link
   ------------------

所有的---边界都是相同的长度.如果当前页面是链接(即活动链接),则>>显示(它将是图像).问题是,如果我向lis 添加填充,那么它将导致边框位于下面,>>这是不希望的.显然没有javascript.

我试图使用的一般标记是这样的:

<ul>
  <li><a href="#">a link here</a></li>
  <li><a href="#">another link here</a></li>
  <li><a href="#">active link here</a></li>
  <li><a href="#">one more link</a></li>
</ul>

Answer 1

我建议将.active类应用于li,而不是链接,然后使用:

li {
    margin: 0 0 0 5em;
    border-bottom: 1px dashed #ccc;
    position: relative;
}
.active:before {
    position: absolute;
    display: block;
    left: -3em;
    width: 2.5em;
    content: '>>';
    content: url(http://path/to/image.gif);
}

JS小提琴演示.

鉴于使用:before伪元素跨浏览器的困难,似乎值得指出list-style-image可以使用:

li {
    margin: 0 0 0 5em;
    border-bottom: 1px dashed #ccc;
    position: relative;
}

li.active {
    list-style-position: outside;
    list-style-type: circle; // the fall-back option
    list-style-image: url(http://davidrhysthomas.co.uk/linked/bullet_point.gif);
}

JS小提琴演示.

参考文献:

• :before.
• list-style-image.