Skip to content

[css-text-decor] add text-decoration-offset #12301

Open
@olsp

Description

@olsp

When setting text-decoration-line: underline the property text-underline-offset is available. This property is not available when setting overline or line-through as values for text-decoration-line. As far as I understand, there is no text-overline-offset or text-line-through-offset property specified.

My current use case is that I want to implement an effect to hide text by moving a "colored box" over it. This should happen as a transition and each line individually and not just one "colored box" for the whole paragraph.
I thought about transitioning text-decoration-thickness of the underline from 0px to 1lh, but the underline is behind the text, so the text won't be hidden behind the "colored box". When I use the overline and change the text-decoration-thickness the overline moves away from the text. So I would first need to offset the overline to -1lh.

Is there a specific reason offset is only available for underlines?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions