[css-text-4] inline (horizontal) text-underline-offset

[spacecakes]

CSS Text Decoration Module Level 4

Note: 'horizontal' here refers to the inline dimension in the writing mode of western languages.

I would like a way to control offset in the inline dimension too. Maybe the text-underline-offset property could be a shorthand for both vertical and horizontal offsets, so that we’re also able to set them separately. If no second value is specified, the there will be no horizontal offset, which is what you'd normally want.

I have a perfect use case for this where the designer has chosen a thick, semi-transparent and slightly offset (both x, y) underline that resembles that of a highlighter marker.

Example:

This was done using some background trickery to also get it to wrap along with the text:

display: inline;
word-break: break-word;
background-image: linear-gradient(
rgba(36,148,187,0.25),
rgba(36,148,187,0.25));
background-position: bottom 9px right -20px;
background-size: 100% 30%;
background-repeat: no-repeat;
padding: 10px;
margin: -10px;

This works well, but a property to control offset in both directions would save me a lot of code.

[fantasai]

#4557 seems to be the same request.

[spacecakes]

#4557 seems to be the same request.

Sure is!