Bordered elements with non-bordered pseudo-elements

Peter Thiel

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/

BoltClock

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

  1. change the :before pseudo-elements to :after pseudo-elements,
  2. apply the pseudo-elements to all but the last li (li:not(:last-child)) instead of all but the first (li + li), and
  3. apply the border to the a 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;
}

Updated fiddle

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.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Splitting a table into bordered groups with the colgroup and col elements

From Dev

Scaling Bordered and Non-Bordered Flash Graphics Equally

From Dev

Bordered box effect on hover

From Dev

Round bordered table

From Dev

Bordered box effect on hover

From Dev

Css Bordered Triangle

From Dev

Bordered child div that exactly overlaps bordered parent div?

From Dev

Draw a top bordered tip with CSS

From Dev

Partially bordered table of Bootstrap 3

From Dev

Bordered button with slated corner with CSS

From Dev

Bordered button with slated corner with CSS

From Dev

triangles bordered by an inner and outer circle

From Dev

Align text within bordered div

From Dev

how to make bordered image in iOS?

From Dev

ionic resources generates a bordered icon on ios

From Dev

Howto fix Backgroundcolor bleeding in bordered ToolStripStatusLabel

From Dev

UIBarButtonItemStyle Bordered, Done, Plain what is the difference?

From Dev

css half bordered circle with transparent shapes on it

From Dev

Howto fix Backgroundcolor bleeding in bordered ToolStripStatusLabel

From Dev

How to get a bordered picture with two different colors

From Dev

React-Native bordered text input?

From Dev

Class getting bordered instead of its element

From Java

CSS pseudo elements in React

From Dev

hover on :before pseudo elements

From Dev

Universal selector * and pseudo elements

From Dev

Parallax effect with pseudo elements

From Dev

Pseudo elements and SELECT tag

From Dev

Styling Pseudo Elements on hover

From Dev

manipulating pseudo elements with javascript