title: CSS span within a link
body: <p>Sorry if this is a really stupid question, but I'm a developer and my design skills are minimal at the minute, I'm working on a personal site and I'm stuck with a minor issue.</p>
  
  <p>I have a top nav with a <code>ul</code> and <code>li</code> items. These items contain link <code>&lt;a href...</code> and within these tags I have a <code>&lt;span&gt;</code>.</p>
  
  <p>The span only displays when the link is hover over.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div#topnav a span {display: none;}
  div#topnav a:visited span {display:none;}
  div#topnav a:hover span {display: block;}
  </code></pre>
  
  <p>The problem is, the span has quite a bit of text in, and when it displays it makes the link width large, thus pushing the rest of the top nav to the right.</p>
  
  <p>Is there something I can do to tell the a tag to ignore the spans width and not change when the span is displayed but not affect the width being automatically set by the links text (non span)?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="topnav"&gt;
     &lt;ul&gt;
         &lt;li&gt;&lt;a href="http://www.google.co.uk"&gt;Example&lt;span&gt;this is a link to google&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="http://www.bbc.co.uk"&gt;Another EG&lt;span&gt;this is another link that goes to bbc!&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It's worth noting, this text in the span appears below the nav, so I need it all to be displayed.</p>