Set the offset distance of an underline text decoration line.
text-underline-offset: { length| percentage | auto |inherit | initial | revert | unset ;}
auto - Allow the browser to select an optimization for speed and legibility (default).
Length - The offset of underlines as a <length>, overriding the font file suggestion and the browser default. It is recommended to use em units so the offset scales with the font size.
percentage - The offset of underlines as a <percentage> of 1 em in the element's font. A percentage inherits as a relative value, and so therefore scales with changes in the font. For a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vertical alignment.
Examples:
h1 { text-underline-offset: 0.25em; }
.emw3class { text-underline-offset: 30%;; }
#emw3id { text-underline-offset: auto; }
Try it:
A stationary object remains stationary if the sum of the forces acting upon it - resultant force - is zero. A moving object with a zero resultant force keeps moving at the same speed and in the same direction. |
text-underline-offset is supported by most browsers but not yet Android.
“In skating over thin ice our safety is in our speed” ~ Ralph Waldo Emerson
Related:
text-underline-offset - MDN
text-underline-position: under;
font-size-adjust - Attempt to normalise the font size. CSS3
font-smoothing - Apply anti-aliasing to fonts.