Text-decoration hover properties from parent on links?

  • I’m trying to stylize a link underline effect that comes to starts when mouse hovers over the parent element, unsuccesfully. I’m doing this through Additional CSS Class by adding this to the parent:

    .hover-on-block:hover {
      text-decoration: underline;
      text-decoration-color: red;
      text-underline-offset: -50%;
      text-decoration-thickness: 75%;
      text-decoration-skip-ink: none;
    }

    It underlines every piece of the text BUT the post title link. For some reason the effect works on the author if I make it a link in Block Editor BUT NOT on the title if it’s a link. This is all on Query Loop block btw.

    Also if I change it to this .hover-on-block a:hover { it affects the title link BUT only when I hover over the link itself (this is probably obvious). The thickness is also default and not the 75% (or like 20 pixels, I tested) for some reason even though decoration-color and offset work.

    Help is appreciated, and here’s a couple smaller questions:

    • How can I set the rest of the text to ignore this text-decoration?
    • When you activate links in this theme there’s a black border around the link — how can I change this property by default?
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi
    I tried to follow your instructions but I am not able to get it to work.
    How did you add CSS to the query loop block using the Additional CSS field? I think I am misunderstanding which block is the parent block.

    When you activate links in this theme there’s a black border around the link — how can I change this property by default?

    The theme increases the thickness of the focus outline to pass the recommended accessibility requirements. If you must remove it, please make sure that you replace it with something that is equally or more accessible.

    The theme adds both the text decoration and the outline thickness in the style.css file.
    Remember to not edit this file directly. If you do, you will loose your changes when the theme is updated.




    Thread Starter flown

    (@flown)

    Hi
    I tried to follow your instructions but I am not able to get it to work.
    How did you add CSS to the query loop block using the Additional CSS field? I think I am misunderstanding which block is the parent block.

    So the actual CSS is added to the (from Dashboard) Appearance->Editor->Styles->Edit Styles->Additional CSS and then apply the CSS class through the block editor Advanced->Additional CSS class(es) field.

    Highlighted blue is the Post Template (the parent block) where I placed CSS class, and it works on Excerpt etc. It doesn’t work on Title (blue box).

    Hope this helps.

    Also, I can apply the property color: red; (without the text-decoration-) and it works on the title as well.

    Thread Starter flown

    (@flown)

    I think I managed to solve this. It’s not a pretty solution but it works:

    .hover-on-block:hover a:not(.wp-block-post-author-name__link){
      text-decoration: underline;
      text-decoration-color: red;
      text-underline-offset: -50%;
      text-decoration-thickness: 75% !important;
      text-decoration-skip-ink: none;
    }

    I’d much rather directly target the Title Link instead of excluding other links within the parent block but for some reason it doesn’t work.

    (I tried h2.a/a.h2 and with wp-block-post-title but none worked, I’m not even sure I’m using the selector correctly though.) Inspecting the code I guess h2/title is the parent element and a/link is its child (and the hoverable element’s grandchild), and I don’t know how select grandchild element a IF parent is h2. Help is still appreciated if possible.

    (Also thickness needed to be set to !important to work, if there’s a smarter way to implement this I’m all ears.)

    I’m so appreciative of your time. Having expert support is incredibly motivating as I barely know what I’m doing. (And hopefully I was able to explain my problem/implementation clearly. :))

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.