A problem I encounter frequently is when I have a breadcrumb list like
<ul class="horizontal-list">
<li><a href="/home.html">Here's a link</a></li>
<li><a href="/home/subpage.html">Here's another link</a></li>
<li>Here's the final link</li>
</ul>
ul.horizontal-list > li { display: inline; border-bottom: 1px solid #000;}
ul.horizontal-list > li + li:before { content: ">"; padding: 0 3px;}
ul.horizontal-list > li > a { text-decoration: none;}
and I want the pseudo-elements to not have the border, or some other property, that their elements have. Adding border-bottom: 0;
to ul.horizontal-list > li + li:before
does not achieve my end. Why doesn't it?
Here's a fiddle of the scenario: http://jsfiddle.net/oboy1a4r/
The pseudo-elements indeed don't have any borders, which means setting border-bottom: 0
does nothing; however, as they are part of the originating li
elements, they are rendered within the li
element boxes and so the li
borders extend to the pseudo-elements.
A simple solution to this problem is to apply the border to the a
child elements instead of the li
elements. This way the pseudo-elements exist separately from the bordered boxes.
If you need the last item to have a border as well, you could wrap its text in a span
element and apply the border to li > a, li > span
:
<ul class="horizontal-list">
<li><a href="/home.html">Here's a link</a></li>
<li><a href="/home/subpage.html">Here's another link</a></li>
<li><span>Here's the final link</span></li>
</ul>
... but if you prefer to do this in pure CSS without the use of extraneous markup, you will need to
:before
pseudo-elements to :after
pseudo-elements,li
(li:not(:last-child)
) instead of all but the first (li + li
), anda
elements as well as the last li
.Keep in mind that the use of :last-child
will cost you IE8 compatibility; if that is a priority then you will have to make do with using a span
element with li + li:before
as mentioned above.
ul.horizontal-list > li:not(:last-child):after {
content: ">";
padding: 0 3px;
}
ul.horizontal-list > li > a, ul.horizontal-list > li:last-child {
text-decoration: none;
border-bottom: 1px solid #000;
}
On a final note, since all of the boxes (including the pseudo-elements) are inline, using whitespace instead of padding will provide consistent spacing between the pseudo-elements and the rest of the text:
ul.horizontal-list > li:not(:last-child):after {
content: " > ";
}
(Technically, you don't need the trailing space because the newline after each </li>
end tag fulfills the role of whitespace for this purpose, but you can include it for the sake of consistency and it will collapse normally.)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments