Streaming live at 10am (PST)

Custom CSS text underline (CSS beginner)

Hi,

I am trying to get the same text styling like in the picture but to mark out single words in a longer text.
32

I guess this could be done with custom CSS quite easily but my CSS knowledge is way to limited to get this done. Also i have no idea where to put the CSS in Webflow and how to assign it to the words i want to have “undelined”

Maybe somebody here can help me with this … on a very CSS beginner level :slight_smile:

Or maybe somebody knows a projet on WF where i can see how it was done.

Many thanks.


1 Like

Hey @Olexi

Can you share your read-only link?

Piter :webflow_heart:

Just have to use an Embed HTML box or in the page properties if it is only on a single page. If it is for number pages, add it to the header under the custom code section of the Project Sections.

Find that article here: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

You can use a bounder for your code.

I would use this site for reference: https://css-tricks.com/styling-underlines-web/
Many different examples. But you would need to add a tag and give its own class name for this work.

Send your Read Only Link for this project and include where you want this to occur?

1 Like

@WebDev_Brandon many thanks for your reply. But i just learned that i can add a in line span class to a text inside of the designer. This makes it very easy for me.

2 Likes

@Olexi, that is accurate and actually what I was trying to get across in my way of explaining. But to get a very think underline as you have described it, you still need to add some CSS Trickery. lol

@Olexi Could just use a gradient too for the exact thickness