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. :))

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.