In this article, we’ll discuss the text-underline-offset property in CSS. It is used with an underlined text but it’s not part of it. To set the offset distance of the underline from its original position. By default, it is set to auto, but we may increase it by specifying the length or percentage. If any element contains multiple text-decoration lines then text-underline-offset results only the underline as its value, not other possible values i.e. overline, line-through.
Syntax:
text-underline-offset: auto|<length>|<percentage>;
Property Values:
- auto: It is a default value in which the browser will select the appropriate underline offset.
- <length>: It states the offset of an underline as a unit of length(also includes the negative values), like em.
- <percentage>: It states the offset of an underline in percentage.
- initial: It is a default property for the setting which is auto.
- inherit: It inherits the parent’s underline offset value.
- unset: It removes the element’s current offset value.
Example: In this example, we will see the implementation of the 3 property values.
<!DOCTYPE html> <html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
h2 {
text-decoration: underline solid green;
text-underline-offset: auto;
}
span {
text-decoration: underline wavy green;
text-underline-offset: 0.1em;
}
p {
text-decoration: underline overline dotted red;
text-underline-offset: 90%;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
<span>A computer science portal for geeks.</span>
<p>
We provide a variety of services for
you to learn, thrive and also have
fun!
</p>
</body>
</html>
|
Explanation: For the heading tag, the text is set to underline with solid green color & the text-underline-offset is set to auto value. Similarly, we have set the text-decoration value of <span> tag as underline wavy green & the length value i.e. text-underline-offset value is set to 0.1em. In this case, we have used percentage property i.e. the text-decoration value for <p> tag is set to underline overline dotted red & the text-underline-offset value is set to 90%.
Output:
Supported Browsers:
- Chrome 87.0 and above
- Edge 87.0 and above
- Firefox 70.0 and above
- Opera 73.0 and above
- Safari 12.1 and above