Retrieve and modify :before element with jQuery

问题

I want to select an element which was created by the CSS selector :before.

I tried it by using $('#element:before'), but that did not work, because it selected the whole element and not only the :before element.

Here is the sample code: DEMO

In that example, only the string "1. " should be red, not the whole string. Any idea how to do this?

回答1:

JQuery cannot set css properties on :before content, since it is not contained in an element. If you want to be able to manipulate the color of the :before content with javascript, you can create an extra css class, and add/remove this class.

example

回答2:

You can't target the content created with css :before. You can however target a data element and add that to the content tag in css. See for this the accepted answer on this question.

Also styling with css is possible if you want that is your goal:

div:before {
    content: '1. ';
    color:red;
}

Will only make the 1. red.

来源：https://stackoverflow.com/questions/11071408/retrieve-and-modify-before-element-with-jquery