How to use css text strikethrough

CSS text strikethrough is a common text style effect. You can add a horizontal line to the text to indicate that the text has been deleted or is a comment. It can also be used to emphasize changes in the text.

In web design, CSS text strikethrough is widely used. Strikethrough is used in some blog posts to indicate that the author has modified or deleted the original text content. Of course, CSS text strikethrough can also be used to display price specials or make some specially emphasized text.

Specifically, the attribute used by CSS text strikethrough is text-decoration, and its value is line-through, as shown below:

text-decoration: line-through;

In addition, in practical applications, we also You can use CSS pseudo-class selectors to achieve more flexible text strikethrough.

For example, we can add a strikethrough effect when the mouse hovers to the text with the ID of demo, as shown below:

#demo:hover {
    text-decoration: line-through;
}

The above code indicates that when the text with the ID of demo is added with the mouse hover Strikethrough effect, that is, when the mouse moves over the text, the text will appear strikethrough.

If we want to add a special strikethrough style, we can use the CSS pseudo-element :before or :after to achieve it, as shown below:

#demo:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background-color: #000;
}

The above code indicates that the ID is demo Add a strikethrough style in front of the text. The color of the strikethrough is black, the width occupies the entire text width, the height is 1 pixel, and the position is in the center of the text.

It should be noted that when using CSS text strikethrough, we must also pay attention to compatibility issues. Because different browsers may interpret text-decoration differently, avoid using browser-specific style modification methods when writing. It is recommended to use universal attributes.

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