How does jQuery change the css pseudo element style and jquerycss pseudo style?

How does jQuery change the css pseudo element style and jquerycss pseudo style?

First, let's take a look at what the pseudo elements of css are:

CSS pseudo elements are used to set special effects for certain selectors.

What are pseudo elements:

: First-line: the pseudo element "first-line" is used to set a special style for the first line of the text.

: First-letter: the pseudo element "first-letter" is used to set a special style for the first letter of the text.

: Before pseudo element: ": before" the pseudo element can insert new content before the element content.

: After pseudo element: ": after" the pseudo element can insert new content after the element content.

Pseudo element example:

. Flow_ball1: after {content: ""; position: absolute; top: 50%; margin-top:-1px; left: 100%; margin-left: 0.133333rem; width: 1.786667rem; height: 2px; background-color: # ff6600; border-radius: 0.053333rem ;}
Add an orange horizontal line (similar to a flowchart) to the class label named flow_ball1)

So the question is, how can I use jquery to change the style of pseudo elements?

 

The answer is:

 $('.flow_ball1').append("<style>#fafang::after{display:none}</style>");

It was also hard to find it for a long time, because the pseudo element does not have an id, and it cannot add id to it, so it's confusing to see this method on the Internet. It's really amazing, as long as you add an html style tag to the front of the element, there is really a feeling of excitement!