Search code examples
cssspaceunderline

CSS - Underline text but ignore the spaces


I have a couple of links that have a margin-left of 3px. These links are underlined and look like that:

<a href='#'>
    test
</a>

Unfortunately, there are spaces inside the link and I'm not able to remove these space since I don't have access to the HTML code. These spaces are also underlined, which I'm not happy with. Is there any way to remove them without changing the HTML?

Here is a fiddle that shows my problem: http://jsfiddle.net/e8quz/

Update:
Here is a picture, what I want it to look like: enter image description here


Solution

  • The spaces come from the line-breaks (well-known from the display:inline-block problematic).

    So make your a elements display: block and float them to the left.

    DEMO

    PS: The display:block is "redundant", as float normally already sets the display property of the respective element to "block". But it do no harm ...!