Geek Answers Handbook

Border elements with non-bound pseudo-elements

The problem that I often encounter is when I have a list of folders, for example

<ul class="horizontal-list">
    <li><a href="/home.html">Here a link</a></li>
    <li><a href="/home/subpage.html">Here another link</a></li>
    <li>Here 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 a border or some other property that their elements have. Adding border-bottom: 0;in ul.horizontal-list > li + li:beforedoesn't reach my end. Why not?

Here's the script script: http://jsfiddle.net/oboy1a4r/

+4
source share
2 answers

, , border-bottom: 0 ; , li, li, li .

a li. , .

, , span li > a, li > span:

<ul class="horizontal-list">
    <li><a href="/home.html">Here a link</a></li>
    <li><a href="/home/subpage.html">Here another link</a></li>
    <li><span>Here the final link</span></li>
</ul>

... CSS ,

  • :before - :after,
  • , li (li:not(:last-child)) , (li + li),
  • a, li.

, :last-child IE8; , span li + li:before, .

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

​​

, ( ) , - :

ul.horizontal-list > li:not(:last-child):after {
    content: " > ";
}

(, , </li> , , .

+2

border-bottom border-bottom a:

ul.horizontal-list > li > a { border-bottom: 1px solid #000; }

border-bottom: 0 , . , - :before li. , , , .

+1

More articles:


All Articles