Search code examples
htmlcssunderlinetext-decorations

How to keep <a> "text-decoration: underline" from breaking while applying some positioning to the child <span>?

For reasons explained below, I am using relative positioning on <span> inside <a> in order to slightly change the position of the text wrapped with <span> (to place it 2px higher than it's placed automatically). When I do this, obviously, the text-decoration: underline; is broken and below my <span> it is also starting 2px higher. Please see the fiddle: http://jsfiddle.net/8qL934xv/

I would like know, if there is a way to make the <a> underline run below the <span> as well, unbroken and preferably with HTML/CSS only.

How I came across this problem:

I am building a bilingual website, where sometimes English words are still in secondary language content. In these cases I wrap these words with <span lang="en"> and apply corresponding font-family this way: 

* [lang="en"]
{
    font-family: 'Ropa Sans', helvetica;
}

However, the font-family I use for my secondary language headings and 'Ropa Sans' do not look nice next to each other and they appear as if "not sitting" on the same line. To fix this, I had been using relative positioning on my <span>-s. For example: 

h1 span {
   position: relative;
   top: -2px;
}

This solution worked just fine, before I realized that it messes up with the underline when applied to links. I could avoid using text-decorations on links like these, but I would prefer to know if there is some simple CSS solution that I was not able to identify.

Solution

  • This isn't possible, but you could do something like 

    a {
    display: block;
    border-bottom: 1px solid transparent;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    border-bottom: 1px solid blue;
    display: inline-block;
}

    This works.