css menu separated by bar

Navigation
0

I have the following list: 

<ul>
  <li>Inicio</li>
  <li>Notícias</li>
  <li>Download</li>
  <li>Contatos</li>
</ul>

I would like to make this a horizontal list separated by a slash character, how can I do this?

    
asked by anonymous 21.06.2016 / 20:55

2 answers

4

For this you will use css. The code is as follows: 

 ul li {
    display: inline;
}

li:before {
content: " | ";
}

li:first-child:before {
content: none;
}

The example here

    
21.06.2016 / 20:59
1

Look at this ... with horizontal bar. 

ul {
  display: inline-flex;
  padding: 0;
  margin: 0;
  border: 1px solid white;
}

ul li {
  list-style-type: none;
  padding: 10px;
  border-right: 1px solid black;  
}

ul li:last-child {
  border: 0px;
}
<ul>
  <li>Inicio</li>
  <li>Notícias</li>
  <li>Download</li>
  <li>Contatos</li>
</ul>
    
21.06.2016 / 22:05
Browsing entire DOM with jQuery Rename image name on upload