You can apply decorations or underlines directly to text elements — like text blocks, paragraphs, or headings — or to a parent element that contains multiple text elements. When you apply the decoration to a parent element, all child elements inherit the decoration styling.
You can modify various text decoration settings:
-
Line — the decoration type for this text, such as an underline, overline, or line through the text
-
Thick — the thickness of the decorative line
-
Offset and position — the distance and position of the line from the text. Note that these options only appear when the underline decoration is selected, because they have no effect on other decoration types.
Add text decorations
To add a text decoration:
- Select the element you want to style
- Go to Style panel > Typography > Decor
- Click the “more options” dots to open Decoration & underline settings
- Change text decoration settings as desired
The decoration will appear on the selected elements according to the styles you choose.
Note
If you previously used custom properties to add any of the following CSS properties to your site, we recommend that you unlink them and use the Style panel controls:
text-decoration-colortext-underline-offsettext-decoration-thicknesstext-underline-positiontext-decoration-skip-inktext-decoration-style
Animate text decorations and underlines
You can apply CSS transitions to your text decoration colors or text underline offsets. You can choose to transition one of the following:
- Text decoration color (
text-decoration-color) — color takes its initial value from the current color (i.e., the color is inherited from the text’s font color)
- Text underline offset (
text-underline-offset)
- All properties
To add a CSS transition to your text decoration:
- Select the element you want to style
- Go to Style panel > Effects
- Choose an option from the Transitions dropdown (i.e., color, offset, or all properties)