Add divider | between menus - css

Question

I'm trying to add a separator between my navigation menu(header).
So basically make it A|B|C
I tried to add this code:
This is an edit:
So my snip, from where the title and url are retrieved looks like this:
<li class="dropdown{% if link.active %} selected{% endif %}{% if submenu_type == 'menu_two_columns' %} tt-megamenu-col-02{% elsif submenu_type == 'megamenu' %} megamenu{% else %} tt-megamenu-col-01{% endif %}" {{ block.shopify_attributes }}>
{{ link.title }}
And I added this code in my theme.css
.link {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
.link:before {
content: '|';
position: absolute;
left: -1px;
line-height: 40px;
}
.link:first-child:before {
content: '';
}
.link:hover {
background-color: #aaa;
color: #000;
}
However, I am not getting the |

Answer 1

you set width:1px to link class so content of that class is not appears, just replace your css code
.link{
height: 40px;
width: 1px;
margin: 0 5px;
overflow: hidden;
background-color: #DDD;
border-right: 2px solid #FFF;
}
with
.link{
height: 40px;
width: auto;
margin: 0 5px;
overflow: hidden;
background-color: #DDD;
border-right: 2px solid #FFF;
}

Answer 2

Try this.
ul{
overflow:hidden;
}
li{
list-style:none;
position:relative;
float:left;
padding:0 15px;
}
li:first-child{
padding-left:0;
}
li:last-child{
padding-right:0;
}
li:not(:last-child):after{
position:absolute;
border:1px solid #000;
height:100%;
content:"";
right:0;
}
li a{
text-decoration:none;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>

Answer 3

Add your border on the left of each link:
.link {
border-left: 2px solid #fff;
}
Then add a CSS rule that cancels that border on the first link using the first-child selector:
.link:first-child {
border-left: none;
}
It's important your links are behaving like links, taking up enough space, etc. I used my own approach here, feel free to take what you like.
.menu {
background: red;
display: flex;
}
.link {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
.link:before {
content: '|';
position: absolute;
left: -1px;
line-height: 40px;
}
.link:first-child:before {
content: '';
}
.link:hover {
background-color: #aaa;
color: #000;
}
<nav class="menu">
Home
About
Contact
Blog
</nav>

Answer 4

Use a Horizontal rule between tags
.menu {
background: #ddd;
display: flex;
}
.link {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 30px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
hr{
margin:0px;
color:blue;
}
.link:first-child {
border-left: none;
}
.link:hover {
background-color: #aaa;
color: #000;
}
<nav class="menu">
Home<hr>
About<hr>
Contact<hr>
Blog<hr>
</nav>
Whats the catcher just place a hr tag between each link and you get the line. hr means horizontal line but since the display is set to inline block and the height is set it can be used as a vertical line

Answer 5

Edit
I've taken your exact updated CSS and placed a few .link anchors inside a nav container. You can see the generated content (separator bar) working as you've styled. The only thing I've changed, which doesn't affect the render, is replacing content: '' with content: none.
.link {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
.link:before {
content: '|';
position: absolute;
left: -1px;
line-height: 40px;
}
.link:first-child:before {
content: none;
}
.link:hover {
background-color: #aaa;
color: #000;
}
<nav>
A
B
C
</nav>
jsFiddle
Here's an example for you using a pseudo class to create the bar separator (|) in CSS content. This is the preferred way to handle details like this because you have more control over the content styling and positioning. I'm also using CSS negation to not add the separator after the last child. To vertically center the generated content, I've used top: 50% and a transform: translateY(-50%) to account for half the height of the actual separator.
.link{
margin: 0 5px;
background-color: #DDD;
position: relative;
}
.link:not(:last-child)::after {
content: '';
position: absolute;
display: block;
right: -10px;
top: 50%;
transform: translateY(-50%);
border-right: 2px solid #000;
height: 100%;
}
<nav>
A
B
C
</nav>
jsFiddle