0

I have such situation (problem visible only in Mozilla Firefox): 

<span style="text-decoration: underline;">
  SomeText
 <span style="font-size: 50pt">Bigger</span>
  SomeText
</span>
<br/>
<span style="font-size: 50pt;">
 <span style="text-decoration: underline">Bigger</span>
</span>

as you can see the underline under "Bigger" word in first line is thinner than the underline in second line. I want to do something like that: (but I don't want to change HTML, only CSS)

<span style="text-decoration: underline;">SomeText</span>
<span style="text-decoration: underline;font-size: 50pt;">Bigger</span>
<span style="text-decoration: underline;">SomeText</span>

I have tried to do that using text-decoration: inherit:

<span style="text-decoration: underline;">
  SomeText
 <span style="font-size: 50pt;text-decoration: inherit;">Bigger</span>
  SomeText
</span>

but now I have got two underlines... So how can I do that? Thanks for help.
PS. I am using Mozilla Firefox

Kacper G.
  • 662
  • 8
  • 30

1 Answers1

1

Turn the inner span into an inline-block. See this answer for explanation.

.underline-all {
  text-decoration: underline;
}
.underline-all * {
  display:inline-block;
  text-decoration: underline;
}
<span class="underline-all">
  SomeText
  <span style="font-size: 50pt">Bigger</span>
  SomeText
</span>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Thank you so much. That is exactly what I mean. – Kacper G. Apr 01 '18 at 12:00
  • You're welcome. Note that the result behaves differently from the original, if the inner span contains multiple words that can wrap at the end of a line. – Mr Lister Apr 01 '18 at 12:02
  • But what do you mean? Could you make example? – Kacper G. Apr 01 '18 at 12:05
  • Sure, see [this answer](https://stackoverflow.com/a/45061654/1016716) for an example of the differences. `inline` wraps around to the next line when there are more words than fit on the previous line, `inline-block` does not wrap like that but uses the whole next line for itself. – Mr Lister Apr 01 '18 at 12:14