css - list of links with shortened horizontal borders?_问答_开发者

css - list of links with shortened horizontal borders?

开发者 https://www.devze.com 2023-03-11 10:55 出处：网络

I\'m trying to do something like so: a link here ------------------ another link here ------------------ >> active link here

I'm trying to do something like so:

   a link here
   ------------------
   another link here
   ------------------
>> active link here
   ---------开发者_StackOverflow---------
   one more link
   ------------------

where all the --- are borders but equal lengths. If the current page is the link (i.e. active link) then >> display (it'll be an image). The problem is that if I add padding to the lis then it'll cause the border to be underneath the >> which is not desired. No javascript obviously.

The general markup I've tried to work with is this:

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

I'd suggest applying the .active class to the li, rather than the link, and then using:

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 Fiddle demo.

Given the difficulties using the :before pseudo-element cross-browser, it seems worthwhile pointing out that list-style-image can be used instead:

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 Fiddle demo.

References:

:before.
list-style-image.

You can always change your a tags to display block and do something like this to get the border effect you are looking for. Because the border is applied to the a element, it shouldn't matter if you apply padding to the li or not.

<html>
    <head>
        <style type="text/css">
            ul {width: 100px;}
            ul li a {border-bottom: 1px black dashed; display: block;}
        </style>
    </head>
    <body>
        <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>
    </body>
</html>