Introduction
Adding an underline to text in CSS is simple and enhances the emphasis of important content. The text-decoration
property is used to apply an underline to any text element.
Problem Statement
Create a CSS code that:
- Adds an underline to text using the
text-decoration
property. - Demonstrates how to customize the underline style.
Example:
- Input: A paragraph element with the text "Underline Example".
- Output: The text appears with an underline applied.
Solution Steps
- Use
text-decoration
Property: Settext-decoration
tounderline
to add an underline to the text. - Customize the Underline: Use different values for
text-decoration
to control the style (e.g., color, thickness).
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Text Example</title>
<style>
/* Step 1: Add underline to text */
.underline-text {
text-decoration: underline;
}
/* Step 2: Customize the underline color and style */
.custom-underline {
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 2px;
}
</style>
</head>
<body>
<p class="underline-text">This text is underlined using text-decoration: underline.</p>
<p class="custom-underline">This text has a custom underline with color and thickness.</p>
</body>
</html>
Output
Explanation
Step 1: Use text-decoration: underline
- To add an underline to text, use this CSS code:
.underline-text { text-decoration: underline; }
Step 2: Customize the Underline
- To customize the underline color and thickness, use this CSS code:
.custom-underline { text-decoration: underline; text-decoration-color: red; text-decoration-thickness: 2px; }
Conclusion
Adding an underline to text in CSS is easy using the text-decoration
property. You can also customize the style by adjusting the underline color and thickness to fit your design needs.
Comments
Post a Comment
Leave Comment