Search code examples
csstagsnavseparator

how to use a nav-tag-based nav-bar with seperators that are not part of the link

I am interested in using the nav tag instead of div>ul>li>a for a horizontal nav menu.

I am able to get the nav bar and insert separator characters.

With the div>ul>li>a approach the added separators are not part of the link since they are added on the li.

when I use nav>a and insert separators they are included as part of the link.

I tried: nav a:before:link{text-decoration: none;} in the css but this did not work.

Also the addition of text-decoration:none in the css that adds my separators did not work.

nav a:before {content: "|"; text-decoration: none;}

using nav>li>a gives me a vertical list with the default bullets which defeats the purpose of using the nav tag.

here is an example of the output where you can see the "|" separators are included as part of the link.

nav bar with separators included as part of links

Realized my listed efforts above (which did not work) would only have removed the underline (not the link) even if they had worked. I would like to remove the link from the separators but might settle from removing the underline if that is all I can get.

Solution

  • both of these worked: html (just put the separator directly in the nav)

    <nav>
  |<a href="s">dsa</a>|
  <a href="a">sdf</a>|
  <a href="d">rsd</a>|
</nav>

    or put the separator in a p-tag that the a-tag is nested in:

    CSS: 

    nav p{display: inline; margin-right:15px;}
nav a{margin: 10px}

    with html:

    <nav>
   <p><a href="t">fdd</a></p>
   <p>|<a href="e">fdd</a></p>
   <p>|<a href="d">fss</a></p>
   <p>|<a href="d">gde</a></p>
</nav>