In general, the name reflects the question. How to do it? It is necessary to set a separator in the form of a colon. I tried css pointing to content: ':' , sort of separates, but this separation looks barely noticeable, the faded color and the colons themselves are pressed to the list item, i.e. I can not position them. So, how do I bring to mind? or tell me another way. example

 .breadcrumb > li + li:before {content: ':';padding: 0;} .breadcrumb > li:after {content: '';display: block;position: absolute;top: -3px; right: -5px; width: 26px;}

So padding does not affect anything, I do not know why.

  • Why can not position? - soledar10
  • Give an example of the code that does not work. - Dmitry

1 answer 1

 * { padding: 0; margin: 0; } ul { padding: 50px; font-size: 0; } ul>li { display: inline-block; vertical-align: middle; padding: 0; font-size: 16px; } ul>li:first-child:before { display: none; } ul>li:before { content: ':'; margin: -2px 5px 0 5px; display: inline-block; vertical-align: middle; font-size: 16px; font-weight: 700; line-height: 1; color: #f00; } ul>li>a { text-decoration: none; } ul>li>a:hover { text-decoration: underline; } 
 <ul> <li><a href="#">breadcrumb</a> </li> <li><a href="#">breadcrumb</a> </li> <li><a href="#">breadcrumb</a> </li> </ul>