Home > Web Front-end > JS Tutorial > How Can I Select and Manipulate CSS Pseudo-Elements (like ::before and ::after) with JavaScript or jQuery?

How Can I Select and Manipulate CSS Pseudo-Elements (like ::before and ::after) with JavaScript or jQuery?

Susan Sarandon
Release: 2024-12-24 00:02:09
Original
670 people have browsed it

How Can I Select and Manipulate CSS Pseudo-Elements (like ::before and ::after) with JavaScript or jQuery?

Selecting and Manipulating CSS Pseudo-Elements with JavaScript or jQuery

Using CSS pseudo-elements, such as ::before and ::after, can add extra styling to your elements without adding extra content to the DOM. However, selecting and manipulating these pseudo-elements can be challenging.

Selecting Pseudo-Elements with jQuery

jQuery allows you to select pseudo-elements using the same syntax as for regular elements. For example, to select the ::after pseudo-element of the .span class, you would use:

To change the 'foo' content in your example, you can use the jQuery css() method:

Using Vanilla JS

If you prefer to use vanilla JS, you can also select pseudo-elements using the :before and :after selectors. However, they require a more complex syntax than jQuery:

To modify the content, you can use the style.content property:

Manipulating Pseudo-Element Content with jQuery

Another approach is to use data attributes to store the pseudo-element content. In your HTML:

In jQuery, you can then use the hover() method to update the content on hover:

In CSS, you can use the attr() function to access the data-content attribute and set the pseudo-element content:

This allows you to change the pseudo-element content without adding extra markup or overriding the existing CSS rules.

The above is the detailed content of How Can I Select and Manipulate CSS Pseudo-Elements (like ::before and ::after) with JavaScript or jQuery?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template