Editable Underline for h1: A Simple Setup Guide

·

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

· Sorted by Oldest

Aurelien S.
·
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.
Rajan
·
You can add that as ::after css, so it also changes it's width if text changes
Aurelien S.
·
Could you share an example Rajan ? How would that work
Rajan
·
Sure I'll prepare a demo and share here
Rajan
·
Hey Ádám S. Aurelien S. 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!
Ádám S.
·
Rajan wow thanks for the details! 🙂
🔥1

Aurelien S.
·
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.
Rajan
·
You can add that as ::after css, so it also changes it's width if text changes
Aurelien S.
·
Could you share an example Rajan ? How would that work
Rajan
·
Sure I'll prepare a demo and share here
Rajan
·
Hey Ádám S. Aurelien S. 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!
Ádám S.
·
Rajan wow thanks for the details! 🙂
🔥1