CSS text-underline-position Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-underline-position property in CSS allows web developers to control the position of underlines for text.

This property is particularly useful for fine-tuning the appearance of underlined text, especially in different writing modes and scripts. It can enhance readability and aesthetics by allowing more precise control over underline placement.

💡 Syntax

The syntax for the text-underline-position property is straightforward. It can be applied to any element containing text.

Syntax

Copied

element {
  text-underline-position: value;
}

Here, value can be one of several keywords that define the position of the underline.

🎛️ Default Value

The default value of the text-underline-position property is auto, which lets the browser decide the most appropriate position for the underline based on the font and text.

🏠 Property Values

Value	Description
auto	The browser chooses the underline position based on the font and the text's language.
under	The underline is placed below the text.
left	The underline is placed to the left of the text. This is used for vertical writing modes.
right	The underline is placed to the right of the text. This is used for vertical writing modes.
under left	For vertical text, the underline is below the text and to the left.

📄 Example

In this example, we'll change the underline position of some text to be below the text.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-underline-position Example</title>
  <style>
    p {
      text-underline-position: under;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>Text with Custom Underline Position</h1>
  <p>This is a paragraph with the underline positioned under the text.</p>
</body>
</html>

🖥️ Browser Compatibility

The text-underline-position property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The text-underline-position property is a valuable tool for web developers looking to refine the presentation of underlined text.

By customizing the position of underlines, you can enhance the readability and visual appeal of your text, especially in complex layouts and designs. Experiment with different values to see how this property can improve the typography on your web pages.