css - list of links with shortened horizontal borders?
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>
加载中,请稍侯......
精彩评论