css strikethrough css

CSS Strikethrough(CSS Strikethrough)

In web design, strikethrough is often used to indicate that a certain paragraph of text is no longer valid or has been modified. CSS provides multiple methods to add strikethrough to text. This article will introduce two of them: text-decoration and text-decoration-line.

text-decoration attribute

The text-decoration attribute is a property in CSS used to add decorative lines to text. It can control the underline, overline, strikethrough, etc. of text. The following is the syntax of the text-decoration attribute:

text-decoration: [line] [style] [color];

Among them, the line parameter is used to set the type of decorative line, the style parameter is used to set the style of the decorative line, and the color parameter is used to set the color of the decorative line.

To add strikethrough to text, you only need to set the line parameter to line-through. The style can be not set by default, and the color can be set according to needs. Here is an example:

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

In this example, we add a strikethrough to the p element, the style is not set, and the color is set to red.

text-decoration-line attribute

The text-decoration-line attribute is a new attribute in CSS3 and is used to control the type of decorative line. Unlike the text-decoration attribute, text-decoration-line only needs to set one type. The following is the syntax of the text-decoration-line attribute:

text-decoration-line: [line];

We only need to set the line parameter to line-through to add strikethrough to the text. Here is an example:

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

In this example, we also add a strikethrough to the p element and set the color to blue. Since the text-decoration-line property only controls the line type, the color needs to be set through the color property.

Summary

Through the above two methods, we can add strikethrough to text in CSS. The text-decoration attribute can control multiple decoration lines at the same time. The text-decoration-line attribute only needs to set the strikethrough, which can be more concise. In the actual development process, you need to choose the appropriate method to achieve the strikethrough effect based on your needs.

The above is the detailed content of css strikethrough css. For more information, please follow other related articles on the PHP Chinese website!