Question:
I have property text-decoration: underline; for all elements that are in div. But by writing text-decoration: none; for one of the labels, I still can't get rid of the underline. What's the matter here?
.one {
display: block;
text-align: right;
font-size: 30px;
text-decoration: none;
}
div {
width: 50%;
height: 500px;
background: yellow;
text-align: center;
font-size: 50px;
color: purple;
text-decoration: underline;
}
<div>
<span class="one">Hello, world!</span>
<br>
<span class="two">Hello!</span>
</div>
Answer:
As stated on MDN
Text decorations are drawn around child elements. This means that if an element has its
text-decoration
property set, then the child element cannot remove it for itself.
translation of @xpy 's answer
The specification states that when applying this property to an element, it will be extended to all internal in flow elements (that is, to elements that do not have float
or absolute positioning specified).
There is also a clarification
Text decoration does not apply to any nested out of flow elements, nor to nested atomic inline-level elements such as
inline-block
andinline-table
.
.one {
display: inline-block;
text-align: right;
font-size: 30px;
text-decoration: none;
}
div {
width: 50%;
background: yellow;
text-align: center;
font-size: 50px;
color: purple;
text-decoration: underline;
padding: 10px;
}
<div>
<span class="one">Hello, world!</span>
<br>
<span class="two">Hello!</span>
</div>