The text-decoration-skip CSS property is used to control which parts of an element’s text content should be skipped or omitted when applying the text decoration styles, such as underline, overline, or line-through.
Here’s an example of how to use the text-decoration-skip property:
h1 {
text-decoration: underline;
text-decoration-skip: ink;
}
In this example, the text-decoration: underline; property is applied to the <h1> heading element to add an underline to the text. The text-decoration-skip property is set to ink, indicating that the underline should skip any ink spill areas or areas where the letterforms extend below the baseline. This prevents the underline from intersecting with descenders or decorative swashes of certain characters.
The text-decoration-skip property accepts different values to define how the text decoration should skip certain areas. Some common values include:
-
none: No skipping occurs, and the text decoration is applied uniformly across the text content. -
spaces: Spaces are skipped, meaning the text decoration is not applied to spaces between words. -
auto: The browser decides the areas to skip based on the font metrics and rendering rules.
It’s important to note that the text-decoration-skip property is not widely supported by all browsers, and its usage might have limited compatibility. Therefore, it’s recommended to use it with caution and consider fallback options or alternative techniques if broader browser support is required.
In summary, the text-decoration-skip CSS property is used to control which parts of an element’s text content should be skipped or omitted when applying text decoration styles. By using different values for this property, you can customize how the text decoration interacts with certain areas of the text. However, be mindful of limited browser support and consider fallback options when using this property.