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.
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.
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.
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
