title: CSS decrease space between text and border
body: <p>When hovering a link I want it to get an underline.
  The underline should be 2px strong and 4px below the text.</p>
  <p>With</p>
  <pre><code>text-decoration: underline
  </code></pre>
  <p>I get a 1px strong line which is 4px below. (Distances vary by font)</p>
  <p>If I write</p>
  <pre><code>border-bottom: 2px solid #000;
  </code></pre>
  <p>I get a 2px line which is about 10px below the text.</p>
  <p>How can I decrease the distance between the text and the border?</p>
  <pre><code>padding-bottom: -6px
  </code></pre>
  <p>does not work. Any negative value with padding-bottom does not work.</p>
  <p>Or how can i get the underline to be 2px strong?</p>
  <p><a href="http://jsfiddle.net/qJE2w/1/" rel="nofollow noreferrer">http://jsfiddle.net/qJE2w/1/</a></p>
  <h2>Update 2022: For everyone coming here years after this question was asked:</h2>
  <p>It's now possible to change the underline via CSS. There are &quot;new&quot; properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset" rel="nofollow noreferrer">text-underline-offset</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness" rel="nofollow noreferrer">text-decoration-thickness</a>.</p>