title: CSS after pseudo class text decoration in link
body: <p>The goal of my question is to create a code which adds the filetype after a link (so that people know whether they should expect any special files). Now there are options to do this using an image, but I don't really like it and I would prefer to have the file type between square brackets in a different size. My approach is to use the :after pseudoclass in the following way</p>
  
  <pre><code>a[href$='.doc']:after, a[href$='.rtf']:after {
  content: " [DOC]";
  font-family: Monospace;
  font-size: 60%;
  font-weight:bolder;
  color:red;
  position:relative;
  top: -0.8em;    
  }
  </code></pre>
  
  <p>However, this gets me a very strange problem. The content seems to be in a block which is part of the link. Therefore the link underlining continues after the link under the "[DOC]".</p>
  
  <p>So the question is pretty straightforward: Is there a way to either do this in another way or to make sure that I can control what is under the "[DOC]" separately from what is under the link?</p>