v150 · CSS · Typography
Inline Element Mix
A paragraph with short links, long links, spans, and nested elements — each with its own decoration source. Configure text-decoration-skip-spaces independently on each element type and watch how the skip-spaces property follows the decoration origin, not the final rendered text.
| Element | Decoration | skip-spaces value | Colour |
|---|---|---|---|
Short links (a.short) |
underline |
|
blue |
Long links (a.long) |
underline |
|
rose |
Highlighted spans (span.hl) |
overline |
|
emerald |
Read the guide for tips on writing performant and accessible CSS text decoration across browsers. The new skip-spaces property is part of CSS4. Compare this spec with the MDN text-decoration-skip-spaces reference page to get the full picture. Each inline element type has its own decoration origin.
Adjust controls above to change each element's skip-spaces value independently.
/* loading */
Key insight:
text-decoration-skip-spaces follows the decoration origin — the element that declared the decoration. Each element type here has its own decoration, so each can independently skip or not skip spaces. A nested element inherits its parent's skip-spaces setting unless it overrides it directly.
see also
- Multiline Link Test — long wrapped links
- Decoration Toggle — all values on a single block
- Prose Links — realistic article body
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗