Underline or bottom border on headings

Author Posts

jassheridan March 9, 2023 at 1:10 pm

Hi, What would be the best way to achieve an underline or bottom border under some heading text. Important criteria is an adjustable gap between the text and the line (so not just text decoration) and adjustable colour & thickness… Also that the line length match the length of the text.
I’ve seem some css examples using linear gradient but don’t see how to find this in Microthemer.

Thanks

Sebastian March 9, 2023 at 2:36 pm

Hey Jas,

You can paste custom code into Microthemer via the code editor to the left of the Font property group, if you want to use the linear gradient CSS you found online.

From what you describe, you might be able to achieve the effect with simple border-bottom settings. You can control the space between the text and the line with line-height and padding-bottom.

Finally, you could also create a ::before or ::after pseudo element which you position with position: absolute (position: relative on the main element to set the positioning context) and set the width to 100% and a bottom border value or 1px+ height with a background color. This video shows how to setup pseudo elements with Microthemer.

Does that help at all?

Cheers,
Sebastian

jassheridan March 9, 2023 at 3:19 pm

Thanks Sebastian, It 100% helps and I will go dig into that now… One quicky… my Headings go the whole width of the containing element – so if I add bottom border it goes the whole width.


Sebastian March 9, 2023 at 3:24 pm

You could set the display of your heading to inline-block, so it doesn’t fill the full width of the container element, if the text is short enough.

You may also want to center the heading by setting text-align: center on the containing element.

jassheridan March 9, 2023 at 3:26 pm

Also, if I use ::before or pseudo before – how would the element I add be dynamically the same length as the words? In your video you’re adding images – but I need a line that’s the same length as the words

Sebastian March 9, 2023 at 3:37 pm

Well if it’s a single line, setting the width of the pseudo element to 100% should suffice.

It’s trickier if the text wraps multiple lines, which it might on mobile.

This CSS tricks article has a good round up of the various options. It looks like text-shadow works well if you do need wrapping.

And there are also some new CSS properties that have OK support now (see supported browsers at the bottom of the following articles):

  1. text-decoration-color
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style
  3. text-decoration-thickness
  4. text-underline-position

jassheridan March 9, 2023 at 3:39 pm

WAHOOOO i’ve done it I think. Thank you

You must login or register to reply to this topic.