title: Styling a span inside an anchor tag
body: <p>I'm trying to make this look pretty, but I've run into a problem. I have a span element containing a Subtitle or short description inside the anchor tag. Unfortunately it's styled the same way as the anchor, which is not how I want it to be. I've tried applying styling to the span itself but they seem to be overridden by the anchor styles. The problem is that I don't want it to be underlined when the link is hovered over. </p>
  
  <p>Here's my html.</p>
  
  <pre><code>        &lt;ul&gt;
             &lt;li&gt;&lt;a href="#"&gt;A &lt;span class="subTitle"&gt;Subtitle&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;B &lt;span class="subTitle"&gt;Subtitle&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;C &lt;span class="subTitle"&gt;Subtitle&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;D &lt;span class="subTitle"&gt;Subtitle&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;E &lt;span class="subTitle"&gt;Subtitle&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>And my CSS</p>
  
  <pre><code>#leftNav ul li { position: relative; }
  #leftNav ul li a span.subTitle
  {
     bottom:          4px;
     color:           #000000;
     display:         block;
     font-size:       12px;
     left:            10px;
     position:        absolute;
     text-decoration: none;
  }
  </code></pre>
  
  <p>I've tried styling the span itself, which doesn't seem to have any effect. Placing the span outside the anchor, relative to the li doesn't work either. the span blocks the hover event of the anchor and it isn't clickable. </p>