How to create a strikethrough style using CSS

CSS is a style sheet language that can be used to define and design the appearance and format of HTML documents. In CSS, strikethrough is a common style that is often used in web pages to represent content that was or is no longer valid. This article will explain how to create a strikethrough style using CSS.

1. text-decoration property

To create a strikethrough style using CSS, you can use the text-decoration property. The text-decoration attribute can be used to add text decorations, including underline, overline, strikethrough, etc. To add a strikethrough style, just set the text-decoration property to "line-through":

p {
    text-decoration: line-through;
}

The above code will apply the strikethrough style to all paragraph (p) elements. If you only want to apply strikethrough within a specific element, you can replace the selector with the class name or ID of that element.

2. text-decoration-line property

There is also a text-decoration-line property in CSS, which only controls the type of text decoration. Therefore, instead of using the text-decoration property, you can set text-decoration-line to "line-through". This will help ensure that other text decorations don't interfere with the strikethrough.

p {
    text-decoration-line: line-through;
}

3. Text color and strikethrough color

If you want to customize the color of strikethrough, you can use the text-decoration-color property. For example, the following code will add a blue strikethrough:

p {
    text-decoration: line-through;
    text-decoration-color: blue;
}

Additionally, if you only want to change the color of the strikethrough without changing the text color, you can use the text-decoration-line color property. As shown below, it will set the strikethrough color to red:

p {
    text-decoration-line: line-through;
    text-decoration-color: red;
}

4. Strikethrough position and style

You can also change the strikethrough using the text-decoration-style property Line style. The text-decoration-style property controls the line type of strikethrough, including solid, dashed, dotted, and wavy lines:

p {
    text-decoration-line: line-through;
    text-decoration-style: dotted;
}

In addition, you can use the text-decoration-position property to control the position of strikethrough in the text. Location. Strikethrough can be placed below or above text (by default). For example, this will place strikethrough above the text:

p {
    text-decoration-line: line-through;
    text-decoration-position: over;
}

In CSS, there are many options for customizing strikethrough styles. You can change its color, style and position according to your needs. Additionally, you can set text-decoration-line to "line-through" and text-decoration-color to your desired color to ensure other text decorations don't interfere with your strikethrough.

The above is the detailed content of How to create a strikethrough style using CSS. For more information, please follow other related articles on the PHP Chinese website!