Remove text-decoration underline, for a:after in css

Question

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.

See http://stackoverflow.com/questions/1238881/text-decoration-and-the-after-pseudo-element-revisited — Asad Saeeduddin, Nov 01 '12 at 06:32
Another way you could do it is replace the text-decoration with none and apply the underline on the text with a border-bottom: 1px solid #ccc, and for the :after use a border-bottom: 1px solid white; that way no underline will be applied to the :after element but an underline will be on the text. simple and should work fine. Use padding on the :after if you want to have an empty gap between the :after element. — John Griffiths, Nov 18 '14 at 16:06

score 27 · Answer 1 · edited Nov 21 '20 at 01:00

27

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>

edited Nov 21 '20 at 01:00

F. Müller

3,969
8
38
49

answered Nov 01 '12 at 06:29

Rohit Azad Malik

31,410
17
69
97

atleast read the question first – Mr. Alien Nov 01 '12 at 06:30
Why did this work for me? Can someone explain? – Deitsch Jun 06 '23 at 08:09

score 5 · Accepted Answer · edited May 04 '23 at 13:09

you can use one another method also for your question :- demo

I have tried with minimized code :-

.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;
}

<div class="nav_container">
  <a href="demolink">menu1</a>
  <a href="demolink">menu2</a>
  <a href="demolink">menu3</a>
</div>

score 1 · Answer 3 · answered Nov 01 '12 at 07:02

I don't exactly know what your .panel.selected {} part does. However you can make the link underlined when it is focused by using this.

.panel:focus {text-decoration:underline;}

And you can remove the underline from links and pipes(|) like this.

.panel:link {text-decoration:none;}

Add above two in to your page and check.

score -1 · Answer 4 · answered Nov 02 '12 at 14:08

A simple menu for your requirement.

HTML:

<div class="menu">
<ul>
<li class="last-menu"><a href="#">menu1</a></li>
<li class="last-menu"><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>

CSS:

.menu{
    width:100%;
}

.menu ul{
    list-style:none;
}

.menu li{
    float:left;

}

.last-menu{
    border-right:1px solid #000;
}

Remove text-decoration underline, for a:after in css

4 Answers4