Text Decoration

Utilities for controlling the decoration of text.

Underline

Use the textDecoration="underline" utility to underline text.

<x.p textDecoration="underline">
  Computers have lots of memory but no imagination.
</x.p>

Line Through

Use the textDecoration="line-through" utility to strike out text.

<x.p textDecoration="line-through">
  Computers have lots of memory but no imagination.
</x.p>

No underline

Use the textDecoration="none" utility to strike out text.

<x.p textDecoration="none">
  Computers have lots of memory but no imagination.
</x.p>

Responsive

To control the text decoration of an element at a specific breakpoint, use responsive object notation. For example, adding the property textDecoration={{ md: "underline" }} to an element would apply the textDecoration="underline" utility at medium screen sizes and above.

<x.div textDecoration={{ md: 'underline' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.