title: How to alter text size on hover, without pushing the surroundings (html/css - no javascript)
body: <p>Example: <a href="http://jsfiddle.net/rXf4U/5/" rel="nofollow">http://jsfiddle.net/rXf4U/5/</a></p>
  
  <p>I don't think I can explain it any better than it's done in the title, but the example should be pretty self explanatory.</p>
  
  <p>I have a finite about of space filled with tags, words or whatever. In order to make room for more, I've lowered the text-size, but want then to actually be readable when hovering. It is easy to see from the example wherein the problem lies.</p>
  
  <p>I've tried just about everything, including a lot of searching. I've tried to use z-layers. I didn't expect it to work and of course it didn't. I've also tried various approached involving positioning, and while I have succeeded to some degree, it really is a mess.</p>
  
  <p>Example: <a href="http://jsfiddle.net/rXf4U/17/" rel="nofollow">http://jsfiddle.net/rXf4U/17/</a></p>
  
  <p>As this is not a new concept, I'm sure it's just be who are unable figure out the correct search term, but just the same, I'm stuck ;)</p>
  
  <p>I do hope you'll guide me in the right direction.</p>
  
  <p>Best regards.</p>
  
  <p>Important edit:
  Of course the li tag will contain link:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;keyword&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;keyword&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;keyword&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;keyword&lt;/a&gt;&lt;/li&gt;
    ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>I do hope this makes it more "possible" to do without JavaScript.</p>
  
  <p>Sorry for the screw up.</p>