


Which property is used to underline, overline, and strikethrough text using CSS?
Sep 07, 2023 pm 06:37 PMIn CSS, the "text-decoration" property is used to add underline, overline, and strikethrough to text.
Underlining text means drawing a line below the text, and underlining text means drawing a line above the text. Deleting text means drawing a line over the text to show that the text has been deleted.
In this tutorial, we will learn to style different text using different values of the text-decoration CSS property.
grammar
1 |
|
value
Style——Represents the style of decorative lines, such as solid lines, dotted lines, wavy lines, etc.
Decoration - It can decorate text with "underline", "overline" and "throughline" values.
Color - Set the color of the decorative line.
Thickness——Used to set the thickness of the decorative line.
Example
In the example below, we use the "text-decoration" CSS property to decorate text. We set a "solid" line style, a red "underline" decoration, and a 5px weight, which the user can observe in the output.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Example
In the example below, we decorate the text with a blue overline. In the output, the user can observe the blue line above the text.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Example
In this example, we used the "text-decoration" CSS property and the "line-through" value to remove text. In the output, the user can observe the lines above the text. This way we can show that there are errors in the text without deleting it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Example
In this example, we created three different div elements with different text. We use a different decorative style for the text of each div element. In the output, the user can observe the difference between "underline", "overline" and "thread" text decoration styles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Conclusion
This tutorial teaches users how to decorate text using the “text-decoration” CSS property. Users can decorate the text differently using different values as needed.
The above is the detailed content of Which property is used to underline, overline, and strikethrough text using CSS?. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Adding Box Shadows to WordPress Blocks and Elements

Create a JavaScript Contact Form With the Smart Forms Framework

Create an Inline Text Editor With the contentEditable Attribute

Making Your First Custom Svelte Transition

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)

File Upload With Multer in Node.js and Express

Demystifying Screen Readers: Accessible Forms & Best Practices
