How to place separator in css

[newcoder1010]

Hello,

 

I like to put a separator ( | ) in color and bold. Below code does not put the separator. How can I place a separator between the a links in color and bold?

.navbar-default .navbar-nav>li>a {    content: " | ";   }

Thanks.

[Ingolme]

The content property only works with :before and :after selectors.

 

So you would do it like this:

navbar-default .navbar-nav>li>a:after {    content: " | ";}

You can change its color, font and all the rest with other CSS properties in the same selector.

[newcoder1010]

.navbar-default .navbar-nav>li>a:after  {   /* color: #777;*/       color: #8B0000;    background-color: white;    font-weight:bold;    padding: 0 10px;    float:left;    border-style: solid;    border-width: 1px;    content: " | ";}

I did place your code with other CSS and the main menu links don't look right. I simple like to place the separator after each link except the last link.

 

http://realestatesdcmetroareas.com/

 

Thanks.

[newcoder1010]

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav > .active>a:hover, .navbar-default .navbar-nav>.active>a:focus {   /* color: #555;    background-color: #e7e7e7;*/    color: white;    background-color: #8B0000;    font-weight:bold;}

I made some progress. If you visit my page, you will notice that when a link is active, I see the background color is under link name and the separator. How to put the background color under link name only and how to remove the last separator?

[Ingolme]

The :after selector creates a pseudo-element that acts as if it was inside the element it belongs to. If you don't want that you'll have to actually add the content to the page's HTML instead of using the :after selector

 

You can use the :last-child selector to make the last link not have the vertical bar.

.navbar-default .navbar-nav>li>a:last-child:after {  content: "";}

[newcoder1010]

.navbar-default .navbar-nav>li>a  {    color: #8B0000;    font-weight:bold;    padding: 0 10px;    float:left;    border-style: solid;    border-width: 0px;    margin-right:10px;}.navbar-default .navbar-nav>li>a:after  {margin:10px;    content: " | ";}.navbar-default .navbar-nav>li>a:last-child:after {  content: "";}

When I added the css, all the vertical bars are gone.

[Ingolme]

Actually, the selector should be this since the <a> element is always the last element in its parent <li>

.navbar-default .navbar-nav > li:last-child > a:after

[newcoder1010]

Thanks. It worked.