Site logo

Archived topic

How can I get this wonderful yellow text underlines with CSS

5 replies · Started by Julia on October 12, 2022

Viewing posts 1–6 of 6

Dear Team,

I am wondering if there is a easy way to understand how the yellow text underlines has been done via CSS?

https://celebritypools.com/

I am looking for a permanent text underline like on the page, not on hover.

Thanks,
Julia

Hi Julia,

It's using this CSS:

.gb-highlight {
    text-decoration: underline;
    text-decoration-color: #FFD60E;
}

It's a GB headline block, and the word is selected as the highlight, so GB will add this gb-highlight class to the word.
https://www.screencast.com/t/fK0wDCkCyH

Dear Ying,

you are the best. Thanks

Is there also a way to do that with the Generatepress Toolset?

1. I don't want to install Gutenberg as extra Plugin
2. I don't want to loose the flexibility of the Generatepress headlines.

What do you think?

Best,
Julia

Can you show me the headlines that you want to apply this effect to so I can check if it's possible?

Hi Ying,

of course.
Take the one from the main site:

https://www.ihrcoachinginstitut.de/

<h1> Lassen sie sich von den besten inspirieren – Coaching Frankfurt

I want to highlight the word "besten" with an underline without a link

Best,
Julia

Hi there,

i checked that page, and you're using the GB Headline block for the H1. And that is the best method to use with Yings CSS.

If you wanted the themes H1 heading to appear like that, then that is not possible.

This archived topic is closed to new replies.