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

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/59027817/why-can-text-decoration-in-first-letter-not-cascade-text-decoration-in-first

标签

css

pseudo-element