Jiří Velek Jiří Velek - 3 months ago 9
CSS Question

Adding a symbol after each element in CSS

I need to make a navigation bar, with symbol " | " between each link. I tried using

.navbar li::after {
position:absolute;
content:" | ";
}


But I always end up getting the first symbol under the link, I dont know why.

http://prntscr.com/c34zrf

I also tried using border-right and border-left, but that looks very ugly and gives me 2 lines for every element.

http://prntscr.com/c350gw

Answer

here's how I usually do this building on your border-right solution: fiddle

Html:

I include a span to apply the border to as it means the border will keep the height of the text. If you want to add padding to the list, apply horizontal padding to the li and vertical padding to the span.

<ul>
  <li><span>Link 1</span></li>
  <li><span>Link 2</span></li>
  <li><span>Link 3</span></li>
</ul>

you can use :first-child to remove the border which should work all the way back to IE8

CSS:

ul{

  padding:0px;
  margin:0px;

}

li {

  list-style:none;
  display:inline-block;
  padding:10px 0px;

}

span {

  padding:0px 10px;
  border-left:1px solid red;
  display:inline-block;

}

li:first-child span {

  border-left:none;  

}