Explaining the rationale behind it, I have opted for relative positioning on <span> within <a> to make a slight adjustment in the text position enclosed by <span> (raising it 2px higher than its default placement). However, this causes the text-decoration: underline; to break and the text below my <span> also shifts 2px higher. You can view an example on this fiddle: http://jsfiddle.net/8qL934xv/
I am seeking a way to ensure that the underline of the <a> extends beneath the <span>, remaining intact and ideally utilizing only HTML/CSS.
The Issue's Origin:
In constructing a bilingual website, English terms sometimes persist in secondary language content. To address this, I encase these terms with <span lang="en"> and employ a specific font-family using the following method:
* [lang="en"]
{
font-family: 'Ropa Sans', helvetica;
}
However, the font-family utilized for secondary language headers and 'Ropa Sans' do not harmonize well together, appearing disjointed. This led me to implement relative positioning on my <span> elements. For instance:
h1 span {
position: relative;
top: -2px;
}
This remedy functioned effectively until the disruption it caused to underlined links came into realization. While I could refrain from applying text decorations to such links, I prefer to ascertain if there exists a straightforward CSS solution that has eluded me.