Cannot Undo Text-Decoration for Child-Elements

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.

Remove underline only from anchor element child

Try following css,

a:hover i{
    display: inline-block; <-- this is the trick
    text-decoration:none !important;
}

Demo

Unable to un-line-through a nested element

You'll have to wrap the text in something like a span, and apply text-decoration: line-through to that: http://jsfiddle.net/9qbsq/1/

That way, you don't have to achieve the impossible task of removing line-through on a child element when a parent element has line-through applied.

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>​

text-decoration: underline with transformed element inside

You can replace it with a gradient like below:

.dot{  display: inline-block;  transform:scale(1.25);  margin: 0 0.25em;}
a{  line-height:1.2em;  background:    repeating-linear-gradient(to bottom,    transparent 0,transparent calc(1em - 1px),    currentColor calc(1em - 1px),currentColor 1em) ;  text-decoration:none;}

<a href="#">  Text   <span class="dot">•</span>   Text</a><div style="width:50px"><a href="#" >  Text   <span class="dot">•</span>   Text</a></div>
<div style="width:50px"><a href="#" style="font-size:20px">  Text   <span class="dot">•</span>   Text</a></div>

Text-Decoration: underline has undocumented line thickness property

The thickness can be controlled with: text-decoration-thickness property.

The color of the with: text-decoration-color property.

h1 {
  text-decoration: underline;
  text-decoration-thickness: 50px;
  text-decoration-color: red;
}

<h1>Our Elixirs</h1>

Child of anchor can't have text decoration removed?

http://jsfiddle.net/CHSmV/

I couldnt get it to work without modifying your HTML. If you are able to do that, see my fiddle. I added an extra span around the non-tooltip text and added classes to both spans. Then I targeted the relevant spans with the proper text-decoration.

This worked in FF 3.6, IE 7+8, Safari 5 and Chrome 9.

---

Related Topics