text-decoration sticky?

[keithrw]

Any ideas why this doesn’t work?
http://codepen.io/keithwyland/pen/14/1

Is text-docoration just that sticky that you can’t “undo” it on a “child”?
Workarounds?
Any help appreciated!

[TheDoc]

That doesn’t work because the

that you’re applying the original underline to spans the entire width of your text.

[keithrw]

thanks for the reply.
so text-decoration, when applied, blankets over the whole text of an element and doesn’t allow for child elements to change? why wouldn’t it work the same way if the parent was set to “none” but the child is set to “underline”?

[AskRay]

Try using the span element to apply the text-decoration: underline.

http://codepen.io/pen/14/6

[TheDoc]

Think of it like this…

If you have a div with a green background and a child element in it with a background set to ‘none’, it’s still going to have a green background. It hasn’t taken away the background that it’s already sitting on.

It is a little odd, I think it should work the same as italics/bold but it doesn’t.

[keithrw]

@AskRay – Thank you for replying with your workaround. Yes, I understand this can be done. The problem with my case is that the table heading is what already receives the text-decoration style of underline.

@TheDoc – Thanks for another reply. I was following that logic as I was reading, then I decided to try something that defies it.
http://codepen.io/keithwyland/pen/16/2

in this case, the text has a background-color: none, and when moved down by absolute positioning, the parent’s background-color does not come with it… yet, the text-decoration example, the underline does. Weird, right?

[Taufik Nurrohman]

Works fine on Firefox. Try this:

.un .no-un {text-decoration:none;}

[keithrw]

@Hompimpa – unfortunately, for me in Firefox on Mac or PC this does not work.

Thanks for trying everyone. I found the (unfortunate) answer finally in the spec. I was first sent this link to a stack overflow question, the accepted answer of which linked to the text-decoration spec and points out a spot I overlooked. It’s similar to @TheDoc ‘s answer, with a little bit different perspective.

More background on my issue (if you’re curious) – There is javascript that is adding a class to the table header for sorting. I was just hooking into that already-used class to add text-decoration to give the user an indication that the header can be clicked. Then they decided they wanted a few of the words to not be underlined, which is where I came across this. I’ll probably just end up doing something like this:

Stuff to be underlined Stuff to not be underlined

[Author]

Posts