How to Get This CSS Text-Decoration Override to Work

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

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.

colour is override and yet text decoration in css

Browsers these days limit what styles you can apply for the :visited state - because otherwise, checking for certain changes in layout via JavaScript allows to determine whether you visited an external URL already.

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#Styling_restrictions:

Styling restrictions
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:

Allowable CSS properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.

https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector:

Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through window.getComputedStyle and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.

CSS: Could not override inherited text-decoration property

After a quick play with some CSS, a workaround (which is horrid, but does work) would be to do the following in your CSS:

.menu span {text-decoration:underline;}

... in place of the first line of your sample CSS.
Then in the HTML do the following:

<span class="menu">
    <span>Some underlined text came here...</span>
    <a href="...">this text should not be underlined until mouse on!</a>
    <span>Some more underlined text came here...</span>
</span>

It's far from being perfect, but is the best I can come up with for the moment.

Why can't I override text-decoration for visited links?

You're limited to the attributes of the visited pseudo-class selector you can change for privacy reasons, so you can only style the following:

color
background-color
border-color
border-bottom-color
border-left-color
border-right-color
border-top-color
column-rule-color
outline-color

Overriding a:hover text-decoration in a different class

Your second selector is less accurate than the first one, therefore it's the first one that is applied.

Plus, you shouldn't target such a wide selector (.footer) in order to only style your links. What you should do is:

.footer a:hover{ text-decoration: none; }

(As I assume that default a state doesn't have a text-decoration: underline;)

CSS - overriding an inherited text-decoration:line-through

Try these http://jsfiddle.net/Y7ZVp/4/

its working fine.

else you can add your text on

tag and give line-through on .strike p

you can try any on them

---

Related Topics