CSS text-decoration
Anonymous contributor
Published Jun 30, 2021Updated Nov 16, 2024
Contribute to Docs
The text-decoration CSS property adds a line beneath, over, or through the text. To reset it, the property can be set to none.
The line can also be styled as wavy, dotted, or in a custom colour.
Syntax
text-decoration: <text-decoration-value>;
The text-decoration-value can be the following:
noneunderlineoverlineline-through
Examples
Paragraph with an underline
p {text-decoration: underline;}
<p>Example Paragraph</p>
Paragraph with an overline
p {text-decoration: overline;}
<p>Example Paragraph</p>
Paragraph with a line through
p {text-decoration: line-through;}
<p>Example Paragraph</p>
Paragraph with a wavy red underline
p {text-decoration: red wavy underline;}
<p>Example Paragraph</p>
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
- Includes 34 Courses
- With Professional Certification
- Beginner Friendly.115 hours
- A full-stack engineer can get a project done from start to finish, back-end to front-end.
- Includes 51 Courses
- With Professional Certification
- Beginner Friendly.150 hours