Relume Community Icon
Relume Community
  • 🏠Home
  • 📅Events

  • 🔵Announcements
  • 🔵General
  • 🔵Getting Started
  • 🔵Issues
  • 🔵Showcase

Powered by Tightknit
General
General

Editable Underline for h1: A Simple Setup Guide

Avatar of Ádám S.Ádám S.
·

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

🙌1

6 comments

  • Avatar of Aurelien S.
    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.

  • Avatar of Rajan
    Rajan
    ·

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

  • Avatar of Aurelien S.
    Aurelien S.
    ·

    Could you share an example Rajan ? How would that work

  • Avatar of Rajan
    Rajan
    ·

    Sure I'll prepare a demo and share here

  • Avatar of Rajan
    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!

  • Avatar of Ádám S.
    Ádám S.
    ·

    Rajan wow thanks for the details! 🙂

    🔥1