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