Pseudo elements in CSS3 use JS how to select and manipulate what are pseudo elements and which are pseudo elements js to change the style of pseudo elements

Pseudo-elements are used to set special effects on certain selectors. Existing elements refer to those that exist in the dom, pseudo-elements are a kind of virtual, and styles are also used for this virtual element.

Pseudo-elements :before and :after, for example, are used to insert content into the head or tail of an element in css rendering, which are not bound by the document, nor affect the document itself, only the final style.

These additions do not appear in the dom, only in the css rendering layer.

It does not exist in the document, so js cannot manipulate it directly. The jquery selectors are all based on dom elements, so they cannot directly manipulate pseudo-elements.

:first-letter: Adds a special style to the first letter of text.

:first-line: Adds a special style to the first line of text.

:before: Adds content before the element.　

:after: Adds content after the element.　

::p laceholder: Text that matches a placeholder and the pseudo-element takes effect only if the placeholder attribute is set. (Only the form of double colons is supported).

::selection:css pseudo-elements are applied to parts of a document that are highlighted by the user (such as parts selected using a mouse or other selection device). (Only the form of double colons is supported).　

::backdrop (in experimental phase): Used to change the background color in full-screen mode, the default color in full-screen mode is black. (Only the form of double colons is supported).

Replacing the class to implement pseudo-element attributes is worth changing:

2. Use cssstylesheet's inserttrule to modify the style for pseudo-elements:

Addrule Description:

3. Insert in the tag

Modify the attribute value of the content of the pseudo element, using the insert of cssstylesheet to modify the style for the pseudo element

note:

The content attribute of pseudo-elements is powerful and can write a variety of strings and partial multimedia files. But the content of the pseudo-element only exists in the css rendering tree, not in the real dom. So for seo optimization, it's best not to include document-related content in pseudo-elements.

To modify the style of a pseudo-element, it is recommended to modify the style by replacing the class. Because the other two ways to insert inline cssstylesheets are to insert character codes in JavaScript, it is not conducive to the separation of style and control; and string stitching is error-prone.

To modify the value of the content attribute of a pseudo-element, it is recommended to use the data-* attribute of the dom to change it.