The Total theme includes a highlight shortcode you can use that will add a line under the text. This is best used with large headings like the example below:
A large heading with highlighted text
The code used for the example above looks like this:
A large heading with [highlight color="#8de7db"]highlighted[/highlight] text
By default the highlight will use the same color as your site accent color but as you can see in my example you can add a color parameter with a custom color value.
The highlight shortcode can be used in the text editor but also inside certain Total elements such as the Heading element.
Shortcode Attributes
The following attributes are available so you can modify your highlight.
Attributes | Allowed Values | Default |
---|---|---|
color | Any custom hex/rgba/variable color, the word “accent” or a color palette slug. | accent |
height | Custom height which will be added as an inline CSS height attribute. | 0.5em |
bottom | Custom bottom position which will be added as an inline inset-block-end attribute. | 0px |