Я хочу выбрать элемент, который был создан с помощью селектора CSS :before.Извлечь и изменить: перед элементом с jQuery
Я пробовал его с помощью $('#element:before'), но это не сработало, потому что он выбрал весь элемент, а не только элемент :before.
Вот пример кода: DEMO
В этом примере, только строка «1» должен быть красным, а не вся строка. есть идеи как это сделать?
JQuery не может задавать свойства css: перед контентом, так как он не содержится в элементе. Если вы хотите иметь возможность манипулировать цветом: перед контентом с помощью javascript, вы можете создать дополнительный класс css и добавить/удалить этот класс.
, если я последую вашему подходу и предположил, что цвет может иметь 100 различных значений, мне нужно будет создать 100 классов css. что не очень элегантно. – Alp
Это правильно. Если вам действительно нужно иметь множество разных значений, вы не можете использовать css-контент и css: перед селектором. Вместо этого используйте элемент span, это даст вам гораздо больше контроля. – aaberg
Я согласен с @aaberg, элемент span намного приятнее в этом случае. – Tim
Вы не можете настроить таргетинг на контент, созданный с помощью css :before. Однако вы можете ориентироваться на элемент данных и добавлять его к тегу content в css. См. Для этого принятый ответ на этот question.
Также укладка с помощью CSS можно, если вы хотите, чтобы ваша цель:
div:before {
content: '1. ';
color:red;
}
Останется только сделать 1. красный.
Решение css-only не является вариантом, потому что мне нужно динамически изменять атрибут (в этом примере цвет). поэтому существует потребность в некоторой магии jquery. метод 'attr()', похоже, не работает с другими атрибутами, чем с содержимым, что в данном случае не является полезным. – Alp
': before' не создает элемент, так что вы не можете выбрать его. Вы можете сделать это, хотя http://jsfiddle.net/qGStB/2/ – Esailija
Возможный дубликат [Манипулирование CSS: до и: после псевдоэлементов с помощью jQuery] (http://stackoverflow.com/questions/5041494/manipulating- css-before-and-after-pseudo-elements-using-jquery) –