Streaming live at 10am (PST)

Best way to make this underline?

Hello, what would be the best way to make the underline beneath the ‘building’ text on the screenshot?

Screen Shot 2021-10-01 at 11.34.56 am


Hi @zachdinge, thanks for your post.

I made a quick video how to do this using a text span:

I hope this helps :slight_smile:

Hi Dave, this works thanks so much!

Is there a way to make the underline curved like in the screenshot though? and different colour?

1 Like

With a bit of custom code alongside the span technique @cyberdave mentioned, you can definitely get something similar working. Once you’ve set your text span class name, make sure you set the class as position: relative (so we can align the underline graphic to the text) and then use that class in your code with something similar to the following:

<style>
  .YOUR-TEXT-SPAN-CLASS:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .5em;
    background-image: url('YOUR-IMAGE-FILE');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -1;
  }
</style>

For reference, I made a simple Codepen that you can checkout and copy from that gives a similar effect—just replace my placeholder image with your custom underline:

I’d recommend using an embed element to start (so you can see the changes in the designer) but you can move it either to your Project Settings (if it’s site-wide) or your Page Settings (if it’s only on a single page) to make sure things remain clean for the published site. One thing to note, this won’t work well for multi-word underlines as the positioning will get messed up if the two words appear on multiple lines, but if you’re using it just like your example you shouldn’t have any issue :+1:

1 Like

Awesome, thank you so much for providing me with that!

Ill try it out soon and get back to you.

Thanks (:

1 Like