How to use CSS to achieve text deletion effect

In web design, we may need some special effects to increase the beauty and interest of the page. For example, we may need some text effects to highlight some important information or emphasize certain content. One of these is text strikeout, where some text is struck through to indicate that it is no longer valid or relevant. This article will introduce how to use CSS to achieve text deletion effect.

1. text-decoration: line-through;

To achieve the text deletion effect, we can use the text-decoration attribute and set the value to line-through. This property is typically used to underline text, but it can also be used to set text removal effects. The following is a sample code:

<p class="delete">这是一段被删除的文本。</p>

.delete {
  text-decoration: line-through;
}

In this example, we add a class named "delete" to the p element and set its text-decoration attribute value to line-through. This means that within this text, words will be strikethrough to indicate that they have been deleted. This is the most basic and simple way to achieve text deletion effect.

2. Customize the strikethrough color, style and thickness

In the style, we can further customize the strikethrough color, style and thickness. Commonly used attributes are text-decoration-color, text-decoration-style and text-decoration-thickness. Here is a sample code:

<p class="delete" style="text-decoration-color: red; text-decoration-style: dotted; text-decoration-thickness: 2px;">这是一段自定义线样式、线粗细和线颜色的被删除文本。</p>

.delete {
  text-decoration-color: red;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

In this example, we also add a class named "delete" to the p element, but this time we use the additional attribute of the text style. We set the strikethrough color to red, the style to dotted, and the thickness to 2 pixels. This way we can personalize the text removal style as needed to fit the specific needs of our web pages.

3. Use pseudo-elements::before and ::after

In addition to using the text-decoration attribute, we can also use pseudo-elements::before and ::after To achieve the text deletion effect. Here is the sample code:

<p class="delete">这是一段使用伪元素实现的被删除文本。</p>

.delete::before,
.delete::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #000;
}

.delete::before {
    transform: rotate(-45deg);
}

.delete::after {
    transform: rotate(45deg);
}

In this example, we use the pseudo-elements ::before and ::after to create a strikethrough. The content attribute of these elements is set to empty, and their position is set to absolute, allowing them to overlap the text. We added a border line to these elements and then rotated them 45 degrees to create a strikethrough shape.

Summary

The text delete effect is a very useful effect when designing web pages and can help depict appropriate scenes and dialogue. In this article, we introduced three ways to achieve text deletion effect: text-decoration attribute, custom style and using pseudo elements. I hope this article can help you increase the flexibility and fun of web design.

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