Menu css separated by bar

Asked

Viewed 1,092 times

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 bar character |, how can I do this?

html css css3

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

  • Perfect answer, I don’t think I need to add.

1

See 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>

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.