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.
The text-decoration-line CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.
underline: It is used to display a line below or under a text.
::first-line is a pseudo-element used to select the first formatted line in a block-level element (such as a paragraph <p> ).
Definition and Usage The text-decoration property specifies the decoration added to text, and is a shorthand property for: text-decoration-line (required) text-decoration-color.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With