How to change the style of css pseudo elements

This article introduces how to change the CSS pseudo-element style. I hope it will be helpful to friends who are learning front-end CSS!

1. CSS pseudo-elements

CSS pseudo-elements are used to set special Effect.

The usage of pseudo elements is as follows:

selector:pseudo-element {property:value;}

CSS classes can also be used with pseudo elements

selector.class:pseudo-element {property:value;}

2. Modify pseudo element styles

(Recommended learning: CSS tutorial)

1. Problem description

Pseudo element example:

.content {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
.content::before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: blue;
}

If we want to modify the pseudo element How to do it? Because pseudo-elements create some abstract elements in the DOM tree, but these abstract elements do not exist in the document language, that is, they do not exist in the HTML source code, so these pseudo-elements cannot be selected through selectors. Since pseudo elements cannot be selected, how can I modify the style of pseudo elements?

2. Solution 1

Redefine the pseudo-element by adding a style tag to override the pseudo-element style. The method is:

$(".content").append("<style>.content::before{display:none}</style>");

But there is a problem with this solution. Because the original style is overwritten, it will affect all tags of this type.

3. Solution 2

The better solution is to modify some styles of pseudo-elements by adding new CSS classes. The method is as follows:

1) Define a new CSS class.

For example, add a new CSS class:

.change::before {
    background: red;
}

2) Add a new class to modify the pseudo-element style.

Use id selector and css selector in JQuery, and then use addClass() to add and modify. The example is as follows:

$("#content1").addClass("change");

The above is the detailed content of How to change the style of css pseudo elements. For more information, please follow other related articles on the PHP Chinese website!