Underline h1 elements while keeping them editable

At a glance

The community members are discussing how to set up an underline on an h1 element that remains editable for editors. The suggestions include:

- Wrapping the h1 in a span element and making only the span editable.

- Using the CSS ::after pseudo-element to add the underline, which will adjust its width if the text changes.

One community member provides a detailed explanation and a preview link demonstrating how to achieve this by adding a span with a class of "underline" inside the h1, positioning the span relatively, and using the ::after property to add the underline. They also mention that text-shadow can be used to create a line effect under the text.

ÁÁdám Simon

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

Attachment

6 comments

AAurelien Schibli

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.

RRajan

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

AAurelien Schibli

Could you share an example ? How would that work

RRajan

Sure I'll prepare a demo and share here

RRajan

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!

ÁÁdám Simon

wow thanks for the details! 🙂

Add a reply

Community forum for knowledge and support

Underline h1 elements while keeping them editable