2

I'm trying to figure out why, after floating a span, that its contents no longer inherit some of the style of its parent, and how to make it do so.

p {
  text-decoration: line-through;
  color: green;
}
span {
  float: left;
  height:2em;
}
<p><span>Lorem ipsum </span> dolor sit amet...</p>

The p's color transfers just fine, but the text-decoration does not. I know I can just add the text-decoration to the span's style, but I'm wondering if there's another way*.

  • The line-through is actually applied or removed conditionally through javascript and I'd rather avoid the need for extra lines to toggle the effect for the span as well as the p.
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
PonyFlare
  • 21
  • 4
  • If your span must float, there is no other way than to manually apply the text decoration to the span as well as the p. See the linked question for an explanation as to why this is the case. – BoltClock Apr 23 '18 at 05:15
  • Well, that's annoying. Also sorry about the duplicate. I clearly failed at searching this time as I spent 20-30 minutes looking for an answer before finally posting! (I've always managed to find my answers previously.) – PonyFlare Apr 23 '18 at 05:38
  • 1
    In fairness, the duplicate had a completely different (and incorrect) title that went unfixed until I edited it just now. Even I had trouble finding it at first. – BoltClock Apr 23 '18 at 05:39
  • tl;dr: the `text-decoration` property does not inherit. – Mr Lister Apr 23 '18 at 09:55

0 Answers0