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

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.

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>