Css Text-Decoration Property Cannot Be Overridden by Child Element

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



Leave a reply



Submit