HTML&CSS · December 20, 2023

Css Basic: text-underline-position

CSS Basic: text-underline-position

CSS (Cascading Style Sheets) is a fundamental technology used for styling web pages. It allows web developers to control the appearance of various elements on a website. One of the many CSS properties available is text-underline-position, which determines the position of the underline decoration on text.

Understanding text-underline-position

The text-underline-position property specifies whether the underline should be positioned below, above, or in the middle of the text. By default, the underline is placed below the text. However, this property provides the flexibility to change its position.

The text-underline-position property accepts two values:

  • auto: This is the default value. It places the underline below the text, leaving some space between the text and the underline.
  • under: This value positions the underline below the text, similar to the default behavior.
  • above: This value positions the underline above the text.
  • left: This value positions the underline to the left of the text.
  • right: This value positions the underline to the right of the text.

Examples

Let's explore some examples to understand how the text-underline-position property works:


/* Example 1 */
p {
  text-decoration: underline;
  text-underline-position: auto;
}

/* Example 2 */
h1 {
  text-decoration: underline;
  text-underline-position: above;
}

/* Example 3 */
a {
  text-decoration: underline;
  text-underline-position: left;
}

In the first example, the underline is positioned below the text, as it is the default behavior. The text-underline-position property is set to auto.

In the second example, the underline is positioned above the text. The text-underline-position property is set to above.

In the third example, the underline is positioned to the left of the text. The text-underline-position property is set to left.

Browser Support

The text-underline-position property is supported by most modern web browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be supported in older versions of Internet Explorer.

Conclusion

The text-underline-position property in CSS allows web developers to control the position of the underline decoration on text. By using this property, you can customize the appearance of underlined text to suit your design needs. Experiment with different values to achieve the desired effect.

For more information on VPS hosting solutions, visit Server.HK.

You may also like...