CSS - text-underline-offset Property

The text-underline-offset property sets distance of an underline text decoration line from its initial position.

Possible Values

auto: The browser chooses the appropriate offset for underlines.
<length>: Any valid length with a specified unit (including negative values).
<percentage>:Specifies the offset of underlines as a percentage of 1em in the element's font.

Applies to

All the HTML elements except table row groups, rows, column groups, and columns.

DOM Syntax

 object.style.UnderlineOffset = auto ;

CSS text-underline-offset - Basic Example

Following is the example which demonstrates how to use text-underline-offset property:

 <html> <head> <style> p { text-decoration: underline red; } .lineone { text-underline-offset: auto; } .linetwo{ text-decoration-color: purple; text-decoration-line: underline overline; text-underline-offset: 1em; } .linethree { xt-underline-offset: 8px; } .linefour { text-underline-offset: -9px; } </style> </head> <body> <h2>Text underline-offset</h2> <p class="lineone">Here is some text with a red underline!</p> <br /> <p class="linetwo"> This text has lines both above and below it. Only the bottom one is offset. </p> <br /> <p class="linethree"> This text has a red underline with offset 8px. </p> <br /> <p class="linefour"> This text has a red underline with offset -8px. </p> </body> </html>

Print Page