title: Remove text-decoration underline, for a:after in css
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/1180910/text-decoration-and-the-after-pseudo-element">“text-decoration” and the “:after” pseudo-element</a><br>
    <a href="https://stackoverflow.com/questions/1238881/text-decoration-and-the-after-pseudo-element-revisited">“text-decoration” and the “:after” pseudo-element, revisited</a>  </p>
  </blockquote>
  
  
  
  <p>I am making a navigation links using <code>&lt;a&gt;</code> tags Following is the html</p>
  
  <pre><code>&lt;div class="nav_container"&gt;
      &lt;a class="panel" href="demolink"&gt;menu1&lt;/a&gt;
      &lt;a class="panel" href="demolink"&gt;menu2&lt;/a&gt;
      &lt;a class="panel" href="demolink"&gt;menu3&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And applying the <code>:after</code> css property to put a pipeline for the divider</p>
  
  <pre><code>.panel:after{
      content:"|";
      margin-left: 4px;
      margin-right: 4px;
  }
  .panel:last-child:after{
      content:"";
  }
  </code></pre>
  
  <p>I want to put underline when the menu is selected for that I am applying a class called selected </p>
  
  <pre><code>.panel.selected {
      text-decoratoion:underline;
  }
  </code></pre>
  
  <p>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 <code>.panle:after</code> as follows,</p>
  
  <pre><code>.panel:after{
      content:"|";
      margin-left: 4px;
      margin-right: 4px;
      text-decoration:none;
  }
  </code></pre>
  
  <p>But still the underline is there.</p>
  
  <p>Any suggestion,
  Thank you.</p>