I need help to remove specific underlining

Hi, when I hover over the picture, the text underneath gets underlined on purpose (link block = set to underline when hovered). How do I only underline the bottom text? Is that possible?

You can probably style categorie text as no-underline.

Alternatively style sec 5 link block as no-underline, then add an underline to section titel. You may need to do that with custom CSS since the H1 itself is not a link, the designer may not give an underline styling option.

Try both approaches.

The link block is overwriting everything that I try. Because the top image and bottom text are in de same link block, i cant get my “hover over image = bottom text: underlined” without putting the entire block on ‘underline when hovered’

I tried to animate the underlining, but webflow doesn’t give me the option “underline”. It only let’s me animate a border.

LINK
https://preview.webflow.com/preview/frisos-marvelous-site-db35c5?utm_medium=preview_link&utm_source=designer&utm_content=frisos-marvelous-site-db35c5&preview=3d621648916c84b606a74c973adeed13&workflow=preview

Mmm, at least in Chrome, it’s resisting overrides on the default styling.
So I’d remove your underline styling from the link’s hover state, and then you can target it so that only the second text element is underlined;

Place this custom CSS in an embed at the bottom of your page so it’s easy to find- you only need it once, not once-per-CMS item.

<style>
a:hover .text-block-15 {
  text-decoration: underline;
}
</style>

I did something wrong with de class, it worked!

Michael, you are the best!

1 Like