1

When using a div with the text-decoration style it does not seem to apply it on a span inside the div after floating that span. What is the explanation for this and how can I fix it?

See my problem here: http://jsfiddle.net/wtBDX/2/

div {
  color: red;
  text-decoration: line-through;
}

div span {
  float: right;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Ramiro
  • 13
  • 2

1 Answers1

4

This is required by the spec, which states:

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

The only fix is to apply the text decoration to the span as well:

div {
  color: red;
  text-decoration: line-through;
}

div span {
  float: right;
  text-decoration: line-through;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thank you, that explains. The question remains, but why?(!) ;) – Ramiro Oct 27 '13 at 11:33
  • 1
    BoltClock explains why in [his answer to my question](http://stackoverflow.com/a/39491131/514793). The text-decoration is not inherited, but propagated, owned and drawn by the parent. It's not really plausible for the parent to render things for the child, if the child is controlling its own position. Also I think there is an alternative solution. You can set the span to inherit the text decoration `div span { text-decoration:inherit;}`. This is useful if your controlling the decoration by adding a conditional class to the parent and don't want to edit all children. – Jools Sep 14 '16 at 14:26