Underlining text with offset

VictorKrs · Post by **VictorKrs** » Wed Jun 28, 2023 3:09 pm

Hello!

Is it possible to make the text underline with an offset so that it is adaptive.
An example of this text design by link: https://cloud.mail.ru/public/akC2/Mpqh21v5n

Thank you in advance for your advice!

crispy68 · Post by **crispy68** » Wed Jun 28, 2023 3:35 pm

I'm not at my home computer so I can't say for sure there is an option in WB but you can add some CSS to make it work.

For example, if your text object is Text2, then enter this between the <head> tags:

Code: Select all

<style>
#wb_Text2 a{text-underline-offset:3px;text-decoration-thickness:6px;}
</style>

The offset can be in px or em. Using em's for the offset will scale with the font size. Keep in mind there is no way to make the underline in front of the text if you use a negative offset. For something like that you will need to use a css pseudo-element to achieve it.

VictorKrs · Post by **VictorKrs** » Wed Jun 28, 2023 4:16 pm

crispy68 wrote: ↑Wed Jun 28, 2023 3:35 pm I'm not at my home computer so I can't say for sure there is an option in WB but you can add some CSS to make it work.

For example, if your text object is Text2, then enter this between the <head> tags:
Code: Select all
<style>
#wb_Text2 a{text-underline-offset:3px;text-decoration-thickness:6px;}
</style>
The offset can be in px or em. Using em's for the offset will scale with the font size. Keep in mind there is no way to make the underline in front of the text if you use a negative offset. For something like that you will need to use a css pseudo-element to achieve it.

Many thanks to crispy68! I'll try the recipe a little later...

VictorKrs · Post by **VictorKrs** » Thu Jun 29, 2023 3:45 pm

Hello crispy 68!

Your code works with a link. I would like to emphasize with an offset just the text (without a link).
I changed the code to format plain text, but it doesn't work:(
What did I do wrong?

Link to the project:
https://cloud.mail.ru/public/tSTR/A7FeKRPHM

While studying the topic, I found a good resource on the topic:
https://freefrontend.com/css-text-effects/

P. S.
I apologize for maybe elementary questions, but I would like to learn how to use CSS on the WWB when developing websites!

crispy68 · Post by **crispy68** » Thu Jun 29, 2023 3:55 pm

Ooohhh...just a normal underlined text.

Same principle will apply. Just remove the 'a' from the css code. So something like:

Code: Select all

<style>
#wb_Text2 {text-underline-offset:3px;text-decoration-thickness:6px;}
</style>

The only issue is if the text is in the middle of a text block. Not sure if you can target a particular word. However, if you underline the text in the text block, it should create a span tag that could be targeted. I will need to try it first when I get home but I believe it would be something like this:

Code: Select all

<style>
#wb_Text2 span{text-underline-offset:3px;text-decoration-thickness:6px;}
</style>

I will confirm once I get on my computer.

VictorKrs · Post by **VictorKrs** » Thu Jun 29, 2023 4:12 pm

Thanks a lot for the comments, Crispy!
I will be grateful to you!!!
I'll get home and try your latest recommendation!

VictorKrs · Post by **VictorKrs** » Thu Jun 29, 2023 8:32 pm

Unfortunately it doesn't work:(

Link to the project: https://cloud.mail.ru/public/MEVj/SbPtPZwkM

crispy68 · Post by **crispy68** » Thu Jun 29, 2023 10:25 pm

It didn't work because you forgot to add the <style> tags in your html box. CSS has to be wrapped in a <style></style> tag when placed in the <head> section.

However, after looking closer at the code, this is what I would use:

Code: Select all

<style>
#wb_Text2 span u{text-underline-offset:15px;text-decoration-thickness:10px;}
</style>

This specifically targets the word even if the word is in the middle of a text box with other text.

VictorKrs · Post by **VictorKrs** » Fri Jun 30, 2023 12:00 pm

Good afternoon, Crispy!

Of course I missed the "style" tag! Fixed it and everything worked!
The negative offset (which I wanted to do on the site) unfortunately does not work. I'll look on the Internet for an answer to this question, fortunately I understood how to insert additional html / CSS code into the WWB project.

I will write a proposal on this topic in the "Suggestions" section.

Thank you Crispy for your help and attention to my question!

crispy68 · Post by **crispy68** » Fri Jun 30, 2023 12:35 pm

I don't believe you can have the underline behind the text where it will show thru using CSS. This can only be achieved by using pseudo elements to get the result you want.

VictorKrs · Post by **VictorKrs** » Fri Jun 30, 2023 4:36 pm

The links to the code were sent by BaconFries to solve this problem:
https://stackoverflow.com/questions/634 ... ind-a-text
https://stackoverflow.com/questions/260 ... ehind-text

I will try to do it in WWB using this code.

VictorKrs · Post by **VictorKrs** » Sat Jul 01, 2023 10:12 am

Good afternoon!

Follow the link to the WWB project file with the solution of the problem of underlining the text with a negative offset:
https://cloud.mail.ru/public/yXEj/GBMVNhQ1L

Animation and effects with underscores (or rather the background of the text), I think that is also feasible, since there is a lot of ready-made code for this on specialized developer sites.

Thank you all for participating in the discussion of the topic!

www.wysiwygwebbuilder.com

Underlining text with offset

Underlining text with offset

Re: Underlining text with offset

Re: Underlining text with offset

Re: Underlining text with offset

Re: Underlining text with offset

Re: Underlining text with offset

Re: Underlining text with offset

Re: Underlining text with offset

Re: Underlining text with offset

Re: Underlining text with offset

Re: Underlining text with offset

Solution: Underlining text with offset