How to write separators between hyperlinks in HTML-CodePudding

How to have a nav section in html header like this with a separator in between each hyeprlink Home | Admin | Help

CodePudding user response：

You can use CSS :before to set for it content "|".

:not(:first-child) will ignore apply | before Home (first child).

You can see my below demo:

.menu-item:not(:first-child):before {
  content: "|";
  padding: 0 10px 0 5px;
}

<a class="menu-item" href="#">Home</a> <a class="menu-item" href="#">Admin</a> <a class="menu-item" href="#">Help</a>

CodePudding user response：

I am not sure exactly what you want but I thought you wanted a separator between links on your page if this is how you have your nav setup:

<div class="navigation">
    <a href="/">Home</a>
    <a href="/admin">Admin</a>
    <a href="/help">Help</a>
</div>

Or something similar. You should add in the separator like this:

<div class="navigation">
    <a href="/">Home</a>
    <div>|</div>
    <a href="/admin">Admin</a>
    <div>|</div>
    <a href="/help">Help</a>
</div>

and give it same/similar css if you have any