Community forum for knowledge and support

Updated 2 months ago

Underline h1 elements while keeping them editable

How would you set up this underline on h1 to keep it editable for editors?

Attachment
image.png
A
R
Á
6 comments

Are you trying to only have the underlined as editable?
I'm sure you can combine some custom element h1 tags, wrap one of them into a span and only make that editable.

You can add that as ::after css, so it also changes it's width if text changes

Could you share an example ? How would that work

Sure I'll prepare a demo and share here

Hey Here's my Explanation & Preview Link to Copy the Code 🚀

Preview Link
Webflow Link

TLDR:
Add a span with class underline in heading, keep the span position relative, add the CSS ::after Property to add width & position variables.

Text Shadow is optional if you want to do that line going under the text thing. since you need to adjust that in responsive viewports!

wow thanks for the details! 🙂

Add a reply
Sign up and join the conversation on Slack