Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS text-decoration sticky?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #38902
    keithrw
    Member

    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!

    #106065
    TheDoc
    Member

    That doesn’t work because the

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

    #106066
    keithrw
    Member

    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”?

    #106068
    AskRay
    Participant

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

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

    #106072
    TheDoc
    Member

    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.

    #106076
    keithrw
    Member

    @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?

    #106091
    Taufik Nurrohman
    Participant

    Works fine on Firefox. Try this:

    .un .no-un {text-decoration:none;}
    #106180
    keithrw
    Member

    @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
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.