css3 write delete

CSS3 is a style sheet language used for web design and layout. It has rich features and powerful functions. Among them, strikethrough is a common effect, usually used to represent deleted text or content. This article will introduce how to write strikethrough using CSS3.

1. Use the text-decoration attribute

The text-decoration attribute is used to set text decoration effects, including strikethrough effects. By setting its value to line-through, the strikethrough effect can be achieved. For example, the following CSS code:

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

This style will be applied to the element with the class name delete, so that all text content will have a strikethrough effect.

2. Customized strikethrough style

In addition to using the text-decoration attribute to set the strikethrough effect, CSS3 also provides a variety of ways to customize the strikethrough style, so that It's more beautiful and personalized.

2.1 Set the strikethrough color

Set the strikethrough color through the text-decoration-color property, for example:

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

This style will be applied to the class name delete element so that the strikethrough color of all text content is red.

2.2 Set the strikethrough position

Set the strikethrough position through the text-decoration-position property. By default, the strikethrough is in the center of the text. You can use this property to set the upper and lower offset of the strikethrough.

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

This style will be applied to the element with the class name delete so that the strikethrough position of all text content is below the text.

2.3 Set the strikethrough width

Set the strikethrough width through the text-decoration-thickness property. By default, the strikethrough width is 1px. You can use this property to change the width of the strikethrough.

.delete {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

This style will be applied to the element with the class name delete, so that the strikethrough width of all text content is 2px.

3. Use pseudo elements to achieve strikethrough

In addition to using the text-decoration attribute to set the strikethrough effect, CSS3 can also use pseudo elements to achieve the strikethrough effect. By setting the content attribute of the pseudo element to empty and setting its width, color, position and other attributes, you can achieve the strikethrough effect. For example, the following CSS code:

.delete::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

This style will be applied to the pseudo-element of the element with the class name delete, causing it to display a strikethrough with a width of 1px and a color of black below the text.

Summary

We can easily achieve the strikethrough effect through text-decoration attributes, custom strikethrough styles, and pseudo-elements. It should be noted that in some special scenarios, such as reading experience considerations or SEO optimization, strikethrough does not apply. It needs to be considered based on the specific situation when using it.

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