Table of Contents
grammar
value
Example
Conclusion
Home Web Front-end CSS Tutorial Which property is used to underline, overline, and strikethrough text using CSS?

Which property is used to underline, overline, and strikethrough text using CSS?

Sep 07, 2023 pm 06:37 PM

哪个属性用于使用 CSS 为文本添加下划线、上划线和删除线?

In 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

text-decoration: style decoration color thickness;

Copy after login

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

<html>

<head>

   <style>

      .text {

         font-size: 1.2rem;

         text-decoration: solid underline red 5px;

      }

   </style>

</head>

<body>

   <h3> Setting the underline to the text using the 'text-decoration' property in CSS </h3>

   <div class = "text">

      This is a text with an underline.

   </div>

</body>

</html>

Copy after login

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

<html>

<head>

   <style>

      .text {

         font-size: 1.2rem;

         text-decoration: wavy overline blue 5px;

      }

   </style>

</head>

<body>

   <h3> Setting the <i> overline to the text </i> using the 'textdecoration' property in CSS </h3>

   <div class = "text">

      This is a text with an overline.

   </div>

</body>

</html>

Copy after login

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

<html>

<head>

   <style>

      .text {

         font-size: 2rem;

         text-decoration: dotted line-through green 5px;

      }

   </style>

</head>

<body>

   <h3> Setting the <i> strickthrough to the text </i> using the 'textdecoration' property in CSS </h3>

   <div class = "text">

      This is a text with a strikethrough.

   </div>

</body>

</html>

Copy after login

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

<html>

<head>

   <style>

      .underline {

         color: grey;

         text-decoration: solid underline yellow 2px;

         font-size: 1.5rem;

      }

      .overline {

         text-decoration: solid overline yellow 3px;

         font-size: 1.5rem;

      }

      .strikethrough {

         text-decoration: solid line-through yellow 2px;

         font-size: 1.5rem;

      }

   </style>

</head>

<body>

   <h3> Setting the strikethrough, underline, and overline to the text using the 'text-decoration' property in CSS </h3>

   <div class = "underline"> underline </div>

   <div class = "overline"> overline </div>

   <div class = "strikethrough"> strike through </div>

</body>

</html>

Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Adding Box Shadows to WordPress Blocks and Elements Adding Box Shadows to WordPress Blocks and Elements Mar 09, 2025 pm 12:53 PM

Adding Box Shadows to WordPress Blocks and Elements

Create a JavaScript Contact Form With the Smart Forms Framework Create a JavaScript Contact Form With the Smart Forms Framework Mar 07, 2025 am 11:33 AM

Create a JavaScript Contact Form With the Smart Forms Framework

Create an Inline Text Editor With the contentEditable Attribute Create an Inline Text Editor With the contentEditable Attribute Mar 02, 2025 am 09:03 AM

Create an Inline Text Editor With the contentEditable Attribute

Working With GraphQL Caching Working With GraphQL Caching Mar 19, 2025 am 09:36 AM

Working With GraphQL Caching

Making Your First Custom Svelte Transition Making Your First Custom Svelte Transition Mar 15, 2025 am 11:08 AM

Making Your First Custom Svelte Transition

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts) Comparing the 5 Best PHP Form Builders (And 3 Free Scripts) Mar 04, 2025 am 10:22 AM

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

File Upload With Multer in Node.js and Express File Upload With Multer in Node.js and Express Mar 02, 2025 am 09:15 AM

File Upload With Multer in Node.js and Express

Demystifying Screen Readers: Accessible Forms & Best Practices Demystifying Screen Readers: Accessible Forms & Best Practices Mar 08, 2025 am 09:45 AM

Demystifying Screen Readers: Accessible Forms & Best Practices

See all articles