Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Underline text with CSS
Use the text-decoration property to underline text with CSS. This property provides several options for decorating text, with underline being one of the most commonly used values.
Syntax
text-decoration: underline;
Basic Example
<html>
<head>
</head>
<body>
<p style="text-decoration: underline;">
India
</p>
</body>
</html>
Different Underline Styles
You can customize the underline appearance using additional properties:
<html>
<head>
<style>
.solid-underline { text-decoration: underline; }
.dotted-underline { text-decoration: underline; text-decoration-style: dotted; }
.wavy-underline { text-decoration: underline; text-decoration-style: wavy; }
.colored-underline { text-decoration: underline; text-decoration-color: red; }
</style>
</head>
<body>
<p class="solid-underline">Solid underline</p>
<p class="dotted-underline">Dotted underline</p>
<p class="wavy-underline">Wavy underline</p>
<p class="colored-underline">Colored underline</p>
</body>
</html>
Using CSS Classes
For better maintainability, define underline styles in CSS classes:
<html>
<head>
<style>
.underlined-text {
text-decoration: underline;
text-decoration-thickness: 2px;
}
</style>
</head>
<body>
<p class="underlined-text">This text has a custom underline</p>
</body>
</html>
Text Decoration Values
| Value | Description |
|---|---|
underline |
Adds a line below the text |
overline |
Adds a line above the text |
line-through |
Adds a line through the text |
none |
Removes any text decoration |
Conclusion
The text-decoration: underline property is the standard way to underline text in CSS. You can enhance it with additional properties like text-decoration-style and text-decoration-color for custom styling.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements