[Resolved] Customize the underlined text

[Leo]

No problem 🙂

[Nov]

Hi Leo,

In your reply #938961, where do I replace it?
Otherwise, is there a way that I can avoid doing it manually (i.e. avoid <u> and use the default underline option) while styling with different color?

Thanks

[David]

Hi there,

do you mean this code:

u {
    text-decoration: none;
    box-shadow: inset 0 -7px 0 0 #bee6ec;
}

If so it is CSS, and this article explains:

https://docs.generatepress.com/article/adding-css/

[Nov]

Hi David

I am able to get the desired style. But I’m saying I need to edit the html and add <u> </u> to achieve that.

I want to achieve the style by just clicking the underline button in the text editor. Without the need to go into html.

P.s. Clicking the underline button in the editor creates html like <span style=text decortation:underline>

[Nov]

Further to my reply above – I already put the css in, and it works. Its just it is related to the <u> class, which does not appear to be what the underline button in wordpress editor uses.

[David]

Ok – so <u> is deprecated any how. Annoying that WP used a span without adding a class.
However you can try this:

span[style*="underline"] {
    text-decoration: none !important;
    border-bottom: 4px solid #f00;
}

This will target any span that has the underline value inline – remove that and replace it with a border style that you can change to suit.

[Sebastián]

Hey! This is the code i’m using right now and works well:

strong {
    box-shadow:inset 0 -7px 0 0 #E22943;
}

Is it possible to set degraded colours in the underline instead of a solid colour? I’ve currently change the branding of my website https://nichoseo.com/ and I would like to replicate the colours used in the logo but in the underline for all the blog posts links.

Let me know if it’s clear enough.

[David]

Hi there,

you could try this:

strong {
    position: relative;
}
strong:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

And this site is great for generating the line-gradient property;

https://cssgradient.io

[Sebastián]

I’m so happy to see that it worked. Thank you so much. Just in case, I want to do the same but with the buttons, but I’m using Elementor for them. By any chance do you know how to do it there?

[David]

Might be best to check with Elementor, not sure if thats an option – all i can offer is some CSS to overwrite its colors:

.elementor-widget-button .elementor-button {
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%) !important;
}
/* Separate hover color */
.elementor-widget-button .elementor-button:hover {
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%) !important;
}

[Sebastián]

Thanks. Will try it.

[David]

You’re welcome

[Author]

Posts