CSS text-decoration property cannot be overridden by child element
From the text-decoration
spec:
The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.
The answer in the linked question further quotes (I can't find this text in the spec anymore however):
Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.
And another quote, CSS3 seems to introduce text-decoration-skip
, intended to address this by applying the property on the descendant (in your case, <span>
):
This property specifies what parts of the element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.
How do I get this CSS text-decoration override to work?
text-decoration
does not behave the same as other font/text related styling like font-weight
. Applying text-decoration
will affect all nested elements as well.
Check this out:
http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Excerpt:
Text decorations on inline boxes are
drawn across the entire element, going
across any descendant elements without
paying any attention to their
presence. The 'text-decoration'
property on descendant elements cannot
have any effect on the decoration of
the element
. . . .
Some user agents
have implemented text-decoration by
propagating the decoration to the
descendant elements as opposed to
simply drawing the decoration through
the elements as described above. This
was arguably allowed by the looser
wording in CSS2.
I've got the info from: http://csscreator.com/node/14951
text-underline decoration not apply on all child element
So instead of using text-decoration
(which only applies to text) you can either use border-bottom
or to keep it more complicated there is also the possibility of using a css pseudo class.
Using border bottom
.read_more_label {
border-bottom: 1px solid black;
}
#arrow_create {
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2px;
}
.icos-angle-down {
margin: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<label class="read_more_label">
Show more
<span id="arrow_create" class="icos-angle-down"></span>
</label>
Inheriting multiple text-decorations on a single element
What you're seeing is that the text decoration on the parent gets applied to the text in the child element, because the text in the child is also considered part of the text in the parent. See the spec for details.
There is currently no way to cancel out the parent text decoration on the child while keeping the text flow. You could float or absolutely position the child element, or make it an inline block, but that alters the layout. If that isn't desirable, you'll have to find a way to move the parent text-decoration
style to, say, a sibling of the child element within the parent. If there is bare text within the parent element, that means you need to wrap that in a sibling. So for example if you had this extra text:
<div style="text-decoration: underline">
<span style="text-decoration: line-through">Hello</span>
world
</div>
You'd need to wrap it, and move the declaration accordingly:
<div>
<span style="text-decoration: line-through">Hello</span>
<span style="text-decoration: underline">world</span>
</div>
Prevent parent underline from underlining child element
The entire li
element is being underlined. The li.rule
rule is being rendered, but the underline applies to the entire list item.
You should wrap the content you want to be underlined inside another inline element. Here's one example:
<!DOCTYPE html>
<html><head><title>No Underline! You're welcome.</title>
<style type="text/css">
li span.emphasis { text-decoration:underline; }
</style>
</head><body>
<ol><li>RULE <span class="emphasis">CONTENT</span></li></ol>
</body></html>
How to avoid child elements to get text-decoration style from body element's style
You can get rid of text-decoration
set on an ancestor using
display: inline-block;
Since in your case your elements are blocks, you may also want
width: 100%;
to make them more block-like.
Demo
Selectively stopping text-decoration: underline on children of a link tag
Read this similar answer and its links for more information: Remove :hover on :after elemets
http://jsfiddle.net/thirtydot/ygXy6/4/
CSS:
a {
font-size: 32px;
text-decoration: none;
}
a:hover span {
text-decoration: underline;
}
HTML:
<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
<span>This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.</span>
</a>
How to underline on hover text within element that excludes a child element
.slide-title a {text-decoration:none;}
.slide-title a:hover {text-decoration:underline;}
$("h1.slide-title").each(function(){
$(this).contents().each(function(){
if (this.nodeType === 3 /*text node*/) {
$(this).wrap("<a></a>");
}
});
});
see fiddle: https://jsfiddle.net/cvn43ncg/1/
Related Topics
Why Doesn't This A:Visited CSS Style Work
Css Native Variables Not Working in Media Queries
How to Add Spacing Between Columns
Why Did Bootstrap 3 Switch to Box-Sizing: Border-Box
Remove Extra Button Spacing/Padding in Firefox
What Has Bigger Priority: Opacity or Z-Index in Browsers
How to Use Particular CSS Styles Based on Screen Size/Device
How to Reference One CSS Rule Within Another
Style ≪Select≫ Element Based on Selected ≪Option≫
Is Background-Position-X (Background-Position-Y) a Standard W3C CSS Property
Css3 Animation Not Working in Safari
Css Transparent Curved Shape With Two Rounded Sides
Sass Variable in CSS Calc() Function