How to stop underline at the same place as the text?

[Mourik]

Hi,

I am trying to make the lines underneath the text to stop where the text stops. See example.
I just can’t figure it out. Anyone knows how to do this?

(PS: why is my hero title not alligned in the middle, it is a bit off the left)

Thank you!

https://preview.webflow.com/preview/veilig-werken-op-de-vluchtstrook?utm_medium=preview_link&utm_source=designer&utm_content=veilig-werken-op-de-vluchtstrook&preview=bde62d78d3bb9d718f77980aedc2ebfc&workflow=preview

[Stan (justAnotherDeveloper)]

How to create underline that follow text length?

Hello everyone, I am new to webflow and I am trying to create my website in a creative and dynamic way. Polishing the last details I have realized that when translating the language page, the underline effect I have created does not respect the length of the text and in some cases the line is longer or shorter. I would like to know how I can make the text box fit the text itself and not the container in which it is added. This is my web page where you can analyze the animation. [Dudas web 2] …

[Port_of_Folio]

Unless I’m viewing your intention incorrectly, I recommend building this in a slightly different way.

1. Remove your current underline divs
2. Select your text and change the display mode to “inline block” (see screen grab 1)
3. Change the bottom rule of this block to height = 4px and color orange (screen grab 2)
4. You can use the parent div position the type to center or some other alignment