Remove text-decoration underline, for a:after in css
Try this one:
.panel:after {
display:inline-block;
}
Or use the following:
.panel {
display: inline-block;
vertical-align: top;
position: relative;
color: black;
font-size: 14px;
font-weight: bold;
margin: 0 5px;
}
.panel:after {
content: '';
border-left: solid 2px red;
left: -10px;
top: 2px;
height: 10px;
position: absolute;
}
.panel:first-child:after {
display: none;
}
.panel:hover {
text-decoration: none;
}<div class="nav_container">
<a class="panel" href="demolink">menu1</a>
<a class="panel" href="demolink">menu2</a>
<a class="panel" href="demolink">menu3</a>
</div>you can use one another method also for your question :- demo
I have tried with minimized code :-
HTML
<div class="nav_container">
<a href="demolink">menu1</a>
<a href="demolink">menu2</a>
<a href="demolink">menu3</a>
</div>
CSS
.nav_container a {
color:red;
display:inline-block;
}
.nav_container a + a{
color:red;
border-left:1px solid red;
padding-left:7px;
line-height:12px;
}