Possible Duplicate:
“text-decoration” and the “:after” pseudo-element
“text-decoration” and the “:after” pseudo-element, revisited
I am making a navigation links using <a>
tags Following is the html
<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>
And applying the :after
css property to put a pipeline for the divider
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
}
.panel:last-child:after{
content:"";
}
I want to put underline when the menu is selected for that I am applying a class called selected
.panel.selected {
text-decoratoion:underline;
}
But the problem is The pipline after menu "|" is also having the underline and I want to remove it. I even tried to change the css for .panle:after
as follows,
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
text-decoration:none;
}
But still the underline is there.
Any suggestion, Thank you.
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>