How do i add vertical line on my menu item in html/css

Question

I am trying to have a menu navigation like this:

start fire | our fires | past fires

I want the menu items to be separated by vertical lines as opposed to spaces

<ul class="standard-nav visible-lg">
    <li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a></li>
    <li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a></li>
    <li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a></li>
    <li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a></li>
    <li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a></li>
    <li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a></li>
</ul>

The css is here:

.standard-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    float: right;
}
.standard-nav li{
    display: inline-block;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}    
.standard-nav li > a{
    color: #ffffff;
    font-family: "Vegur Light";
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height:19px;
    /*text-transform: uppercase;*/
}

jQuery UI tabs could work, but are overkill; [this answer](http://stackoverflow.com/a/11574821/410342) is a decent CSS-only example. Fiddle: https://jsfiddle.net/A52T8/234/ — Shotgun Ninja, Jun 30 '15 at 14:27

Alex Char · Answer 1 · 2015-06-30T14:49:57.600

You can use pseudo-element :after alongside :not(:last-child) to not apply this to last element:

ul li {
  display: inline-block;
}

ul li:not(:last-child):after {
  content: "|";
  }

<ul class="standard-nav visible-lg">
  <li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a>
  </li>
  <li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a>
  </li>
  <li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a>
  </li>
  <li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a>
  </li>
  <li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a>
  </li>
  <li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a>
  </li>

</ul>

For IE8 support reverse the logic of css rule:

ul li {
  display: inline-block;
}
ul li:not(:first-child):before {
  content: "|";
}

<ul class="standard-nav visible-lg">
  <li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a>
  </li>
  <li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a>
  </li>
  <li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a>
  </li>
  <li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a>
  </li>
  <li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a>
  </li>
  <li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a>
  </li>

</ul>

References

:after

:not

:last-child

@BillehSarkozy If I understand right, yes you can do it with pure css. — Alex Char, Jun 30 '15 at 14:29
Since [IE8 supports `:first-child` but not `:last-child`](http://stackoverflow.com/questions/7938521/browser-support-for-css-first-child-and-last-child), I prefer to place the pipe character `:before` every list item and then override it for `:first-child`. — Blazemonger, Jun 30 '15 at 14:44
@Blazemonger thanks for the feedback. Updated. To be honest I never have IE8 in mind. — Alex Char, Jun 30 '15 at 14:50

Tushar · Answer 2 · 2015-06-30T14:30:19.387

2

Use CSS border:

.standard-nav li {
    border-right: 1px solid red;
}
.standard-nav li:last-child {
    border: none;
}

DEMO

Shorter

.standard-nav li:not(:last-child) {
    border-right: 1px solid red;
}

DEMO

edited Jun 30 '15 at 14:30

answered Jun 30 '15 at 14:26

Tushar

85,780
21
159
179

I would apply the border to the `
- `.
– TaoPR Jun 30 '15 at 14:29
how do i add space in between the text and the diagonal line – Billeh Sarkozy Jun 30 '15 at 14:31
@BillehSarkozy Use `padding` on `li` http://jsfiddle.net/tusharj/L6wjrugb/3/ – Tushar Jun 30 '15 at 14:33
i want spacing on both the left and right.when i put padding right it is not reflecting – Billeh Sarkozy Jun 30 '15 at 14:48
is there a way to increase the height of the red line – Billeh Sarkozy Jun 30 '15 at 14:56
@BillehSarkozy Use `line-height` on `li` to set the `height` of separator – Tushar Jun 30 '15 at 14:59

score 0 · Answer 3 · answered Jun 30 '15 at 14:45

You may see this Fiddle Demo.

Whole HTML code:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
.standard-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 25px;
    float: right;
}
.standard-nav li{
    border-right: 2px solid #c4c4c4;
    display: inline-block;
    float: left;
    padding: 0 15px;
}
.standard-nav li:last-child {
    border-right:0;
} 
.standard-nav li > a{
    color: red;
    font-family: "Vegur Light";
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height:19px;
    /*text-transform: uppercase;*/
}
</style>
</head>
<body>
<ul class="standard-nav visible-lg">
    <li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a></li>
    <li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a></li>
    <li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a></li>
    <li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a></li>
    <li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a></li>
    <li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a></li>
</ul>
</body>
</html>

You will observe:

Right Border is applied to each li
Right Border is removed for last li
I have changed the LINK color to red just for a demo purpose - you may latter remove that.

score 0 · Answer 4 · answered Jun 30 '15 at 14:46

0

try this one

li+li { border-left: 1px solid #000000 }

this will affect only adjecent li elements

found here http://www.jackreichert.com/2011/07/31/how-to-add-a-divider-between-menu-items-in-css-using-only-one-selector/

answered Jun 30 '15 at 14:46

Anil Meenugu

1,411
1
11
16

How do i add vertical line on my menu item in html/css

4 Answers4