Why can text-decoration in ::first-letter not cascade text-decoration in ::first-line?

Question

It seems that text-decoration in ::first-letter can not cascade text-decoration in ::first-line. Here is the code:

p::first-line {
  color: orange;
  font-size: 22px;
  text-decoration: line-through;
}

p::first-letter {
  color: green;
  font-size: 36px;
  text-transform: capitalize;
  text-decoration: none !important;
}

<p>
   lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

color and font-size of ::first-letter override those of ::first-line. And it changes nothing whether there is !important or not.

I see capital green L. Your `:first-line` has lower priority than `:first-letter` since `:first-letters` goes after `:first-line`. That is intended. Or you do not see same result? Also `text-decoration` is under your letter. Try putting `underline` on first letter, will see line-through **and** underline — Justinas, Nov 25 '19 at 08:52
@Justinas it overrides everything but `text-decoration`, he wonders why there's still an orange line-through in his first letter. Do you see that orange line-through? — Loi Nguyen Huynh, Nov 25 '19 at 08:56
@HuỳnhLợiNguyễn It's not on letter, but on line itself. — Justinas, Nov 25 '19 at 08:56
@Justinas It seems technically you're true. But it still appears like it's in the first letter, do you have any idea on how to work around to make it to "appear" like there's no line through in there? — Loi Nguyen Huynh, Nov 25 '19 at 09:02
@Justinas Thanks for the discussion. Yes, I do wonder why cascade seems to fail regarding text decoration. The following answers well explains this. — uoay, Nov 26 '19 at 12:07
@HuỳnhLợiNguyễn Thanks for the discussion. And you got my idea. The following answer well explain the situation and the solution is absolutely great. — uoay, Nov 26 '19 at 12:09

Temani Afif · Accepted Answer · 2019-11-25T10:02:39.383

To better understand what is happening add a different text-decoration to the first letter:

p::first-line {
  color: orange;
  font-size: 22px;
  text-decoration: line-through;
}

p::first-letter {
  color: green;
  font-size: 36px;
  text-transform: capitalize;
  text-decoration: underline;
}

<p>
   lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

As you can see the first-letter is having the underline AND the line-through. This is how text-decoration works, it propagates to all the inline elements and you can add more decoration down the Tree.

To avoid this you need to change the display but this is something you cannot do with first-letter unfortunately.

Here is another example to show the effect of display:

p {
  color: orange;
  font-size: 22px;
  text-decoration: line-through;
}

span {
  text-decoration:underline;
  color:green;
}

<p>
   lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

<p>
   lorem ipsum dolor sit amet, <span style="display:inline-block;">consectetur</span> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

From the specification:

This property describes decorations that are added to the text of an element using the element's color. When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). But, in CSS 2.1, it is undefined whether the decoration propagates into block-level tables. For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. 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.

Here is an idea of a solution a little hacky where you can replace the text-decoration with a gradient that you offset from the left to not cover the first letter. You may have to adjust the value based on each situation:

p::first-line {
  color: orange;
  font-size: 22px;
  background:
    linear-gradient(orange,orange) top calc(50% + 0.05em) left 1em / 100% 0.1em no-repeat;
}

p::first-letter {
  color: green;
  font-size: 36px;
  text-transform: capitalize;
}

<p>
   lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Thanks. I see that. In nature, this is all about inline display. I like your hacky solution: if we can't have full control of text decoration, then we just draw a line by ourselves! — uoay, Nov 26 '19 at 12:03

Why can text-decoration in ::first-letter not cascade text-decoration in ::first-line?

1 Answers1

Linked