使用javascript(或jQuery)选择和操作CSS伪元素，如::before和::after

尽管它们是由浏览器通过CSS呈现的，就像它们像其他真正的DOM元素一样，但伪元素本身不是DOM的一部分，因为伪元素，顾名思义，不是真正的元素，因此您不能直接使用jQuery(或任何 JavaScript api，甚至选择器的API)选择和操作它们。这适用于您试图用脚本修改其样式的任何伪元素，而不仅仅是::before和::after。

您只能在运行时通过CSSOM(想想window.getComputedStyle())直接访问伪元素样式，而jQuery除了.css()之外不会公开CSSOM，这个方法也不支持伪元素。

不过，你总能找到其他方法，比如:

• 将样式应用于伪元素的一个或多个任意类,然后类之间的切换(见< a href = " https://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after/5335771 # 5335771 " > seucolega回答< / >的一个简单的例子)——这是惯用的方法,因为它使用了简单的选择器(它不是)区分元素和元素,他们打算使用的方式

• 通过修改文档样式表来操纵应用于上述伪元素的样式，这更像是一种hack

EXAMPLE

jQuery:

<script type="text/javascript">$('span').addClass('change');</script>

在CSS中:

span.change:after { content: 'bar' }

你也可以将内容传递给带有data属性的伪元素，然后使用jQuery来操作它:

在HTML中:

<span>foo</span>

jQuery:

$('span').hover(function(){$(this).attr('data-content','bar');});

在CSS中:

span:after {content: attr(data-content) ' any other text you may want';}

如果你想阻止“其他文本”出现，你可以将此与seucolega的解决方案结合起来，如下所示:

在HTML中:

<span>foo</span>

jQuery:

$('span').hover(function(){$(this).addClass('change').attr('data-content','bar');});

在CSS中:

span.change:after {content: attr(data-content) ' any other text you may want';}

一种有效但不太有效的方法是在文档中添加带有新内容的规则，并用类引用它。根据需要，类可能需要为内容中的每个值提供唯一的id。

$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));$('span').addClass('id-after');

根据克里斯蒂安的建议，你还可以这样做:

$('head').append("<style>.span::after{ content:'bar' }</style>");

您可能认为这是一个很简单的问题，使用jQuery可以做的所有其他事情。不幸的是，这个问题归结为一个技术问题:css:after和:before规则不是DOM的一部分，，因此不能使用jQuery的DOM方法更改。

使用JavaScript和/或CSS变通方法来操作这些元素的方法是;您使用哪一种取决于您的确切需求。

我将从被广泛认为是“最佳”的方法开始:

1)添加/删除一个预定的类

在这种方法中，您已经在CSS中创建了一个具有不同:after或:before样式的类。将这个“new”类放在样式表的后面，以确保它被覆盖:

p:before {content: "foo";}p.special:before {content: "bar";}

然后你可以很容易地添加或删除这个类使用jQuery(或香草JavaScript):

$('p').on('click', function() {$(this).toggleClass('special');});

    $('p').on('click', function() {$(this).toggleClass('special');});

p:before {content: "foo";color: red;cursor: pointer;}p.special:before {content: "bar";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p><p>This is another paragraph.</p>

• 优点:易于实现与jQuery;快速改变多个风格在一次;强制分离关注点(从HTML中隔离CSS和JS)
• 缺点: CSS必须预先编写，因此:before或:after的内容不是完全动态的

2)直接在文档的样式表中添加新样式

可以使用JavaScript直接向文档样式表添加样式，包括:after和:before样式。jQuery并没有提供方便的快捷方式，但幸运的是JS并没有那么复杂:

var str = "bar";document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

var str = "bar";document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');

p:before {content: "foo";color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p><p>This is another paragraph</p>

#0和相关的#1方法在今天得到了很好的支持。

作为一种变体，你也可以使用jQuery来添加一个全新的样式表到文档中，但必要的代码并不干净:

var str = "bar";$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');

var str = "bar";$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');

p:before {content: "foo";color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p><p>This is another paragraph</p>

如果我们谈论的是“操纵”值，而不仅仅是添加值，我们还可以使用不同的方法:

var str = window.getComputedStyle(document.querySelector('p'), ':before').getPropertyValue('content');

var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');

p:before {content:"foo";color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p><p>This is another paragraph</p>

当使用jQuery时，我们可以将document.querySelector('p')替换为# 1，以获得更短的代码。

• 优点:任何字符串都可以动态插入到样式中
• 缺点:原始样式没有改变，只是覆盖;重复使用(ab)可以使DOM变得任意大

3)改变一个不同的DOM属性

您还可以到在CSS中使用#0读取特定的DOM属性。通过在一些精心准备的CSS中结合content:，我们可以动态地改变:before和:after的内容(但是不是其他属性，像边缘或颜色):

p:before {content: attr(data-before);color: red;cursor: pointer;}

JS:

$('p').on('click', function () {$(this).attr('data-before','bar');});

$('p').on('click', function () {$(this).attr('data-before','bar');});

p:before {content: attr(data-before);color: red;cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p><p>This is another paragraph.</p>

如果CSS不能提前准备，这可以与第二种技术结合使用:

var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {$(this).attr('data-before', str);});

var str = "bar";document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {$(this).attr('data-before', str);});

p:before {content: "foo";color: red;cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p><p>This is another paragraph.</p>

• 优点:不会创造无尽的额外样式
• CSS中的缺点: attr只能应用于内容字符串，而不是url或RGB颜色

下面是HTML:

<div class="icon"><span class="play">::before</span></div>

'before'上的计算样式为content: "VERIFY TO WATCH";

下面是我的两行jQuery代码，它们使用了添加一个额外的类来特别引用这个元素，然后附加一个样式标签(带一个!important标签)来改变sudo元素内容值的CSS:

# 0

# 0

如果你想完全通过CSS来操作::before或::after sudo元素，你可以用JS来做。见下文;

jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');

注意<style>元素是如何具有一个ID的，如果样式动态更改，可以使用该ID删除它并再次添加到它。

这样，在JS的帮助下，你的元素就可以完全按照你想要的样式通过CSS进行样式化。

我想有一个外部div的不透明度是不同于内部div的不透明度和改变点击somwewhere;)谢谢!< / p >

   $('#ena').on('click', function () {$('head').append("<style>#ena:before { opacity:0.3; }</style>");});
$('#duop').on('click', function (e) {
$('head').append("<style>#ena:before { opacity:0.8; }</style>");
e.stopPropagation();});
#ena{width:300px;height:300px;border:1px black solid;position:relative;}#duo{opacity:1;position:absolute;top:50px;width:300px;height:100px;background-color:white;}#ena:before {content: attr(data-before);color: white;cursor: pointer;position: absolute;background-color:red;opacity:0.9;width:100%;height:100%;}

<div id="ena"><div id="duo"><p>ena p</p><p id="duop">duoyyyyyyyyyyyyyy p</p>
</div>

</div>

下面是访问:after和:before样式属性的方法，在css中定义:

// Get the color value of .element:beforevar color = window.getComputedStyle(document.querySelector('.element'), ':before').getPropertyValue('color');
// Get the content value of .element:beforevar content = window.getComputedStyle(document.querySelector('.element'), ':before').getPropertyValue('content');

您可以在伪元素的样式表中创建一个伪属性或使用一个现有属性并继承它。

var switched = false;
// Enable color switchingsetInterval(function () {var color = switched ? 'red' : 'darkred';var element = document.getElementById('arrow');element.style.backgroundColor = color;    
// Managing pseudo-element's css// using inheritance.element.style.borderLeftColor = color;    
switched = !switched;}, 1000);

.arrow {/* SET FICTIONAL PROPERTY */border-left-color:red;    
background-color:red;width:1em;height:1em;display:inline-block;position:relative;}.arrow:after {border-top:1em solid transparent;border-right:1em solid transparent;border-bottom:1em solid transparent;border-left:1em solid transparent;    
/* INHERIT PROPERTY */border-left-color:inherit;    
content:"";width:0;height:0;position:absolute;left:100%;top:-50%;}

<span id="arrow" class="arrow"></span>

It seems it doesn't work for "content" property :(

这是不实际的，因为我没有为现实世界的使用写这篇文章，只是给你一个可以实现的例子。

css = {before: function(elem,attr){
if($("#cust_style") !== undefined){$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>");} else {$("#cust_style").remove();$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>");}
}, after: function(elem,attr){if($("#cust_style") !== undefined){$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>");
} else { $("#cust_style").remove();$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>");}}}

这个当前add's a /或追加一个Style元素，其中包含你的必要属性，这将影响目标元素的伪元素之后。

这可以用作

css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after

而且

css.before( ... ); // to affect the before pseudo element.

伪元素不能直接通过DOM访问，目前不可能自由编辑css的具体值。

我的方法只是一个例子，它不适合练习，你可以修改它，尝试一些你自己的技巧，使它适合真实世界的使用。

所以用这个和其他东西做你自己的实验吧!

阿达什·赫格德。

为什么要添加类或属性，当您可以添加style头

$('head').append('<style>.span:after{ content:'changed content' }</style>')

这里有很多答案，但没有一个答案有助于操作css :before或:after，甚至不是公认的答案。

以下是我的建议。让我们假设你的HTML是这样的:

<div id="something">Test</div>

然后你在CSS中设置它的:before并像这样设计它:

#something:before{content:"1st";font-size:20px;color:red;}#something{content:'1st';}

在一些类.activeS上定义一个具有所需样式的css:

.activeS:before{color:green !important;font-size:30px !important;}

现在你可以通过添加类到你的:before元素来改变:before样式，如下所示:

<button id="changeBefore">Change</button><script>$('#changeBefore').click(function(){$('#something').addClass('activeS');});</script>

如果你只想获得:before的内容，可以这样做:

<button id="getContent">Get Content</button><script>$('#getContent').click(function(){console.log($('#something').css('content'));//will print '1st'});</script>

最终，如果你想通过jQuery动态改变:before内容，你可以实现如下:

<button id="changeBefore">Change</button><script>var newValue = '22';//coming from somewherevar add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';$('#changeBefore').click(function(){$('body').append(add);});</script>

点击上面的“changeBefore”按钮将#something的:before内容更改为“22”，这是一个动态值。

我希望这对你们有帮助

你可以使用我的插件来实现这个目的。

JQuery:

(function() {$.pseudoElements = {length: 0};
var setPseudoElement = function(parameters) {if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {for (var element of parameters.elements.get()) {if (!element.pseudoElements) element.pseudoElements = {styleSheet: null,before: {index: null,properties: null},after: {index: null,properties: null},id: null};
var selector = (function() {if (element.pseudoElements.id !== null) {if (Number(element.getAttribute('data-pe--id')) !== element.pseudoElements.id) element.setAttribute('data-pe--id', element.pseudoElements.id);return '[data-pe--id="' + element.pseudoElements.id + '"]::' + parameters.pseudoElement;} else {var id = $.pseudoElements.length;$.pseudoElements.length++
element.pseudoElements.id = id;element.setAttribute('data-pe--id', id);
return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;};})();
if (!element.pseudoElements.styleSheet) {if (document.styleSheets[0]) {element.pseudoElements.styleSheet = document.styleSheets[0];} else {var styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);element.pseudoElements.styleSheet = styleSheet.sheet;};};
if (element.pseudoElements[parameters.pseudoElement].properties && element.pseudoElements[parameters.pseudoElement].index) {element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index);};
if (typeof parameters.argument === 'object') {parameters.argument = $.extend({}, parameters.argument);
if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;
element.pseudoElements[parameters.pseudoElement].index = newIndex;element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;};
var properties = '';
for (var property in parameters.argument) {if (typeof parameters.argument[property] === 'function')element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();elseelement.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];};
for (var property in element.pseudoElements[parameters.pseudoElement].properties) {properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';};
element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);} else if (parameters.argument !== undefined && parameters.property !== undefined) {if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) {var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length;
element.pseudoElements[parameters.pseudoElement].index = newIndex;element.pseudoElements[parameters.pseudoElement].properties = {};};
if (typeof parameters.property === 'function')element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();elseelement.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;
var properties = '';
for (var property in element.pseudoElements[parameters.pseudoElement].properties) {properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';};
element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index);};};
return $(parameters.elements);} else if (parameters.argument !== undefined && parameters.property === undefined) {var element = $(parameters.elements).get(0);
var windowStyle = window.getComputedStyle(element, '::' + parameters.pseudoElement).getPropertyValue(parameters.argument);
if (element.pseudoElements) {return $(parameters.elements).get(0).pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;} else {return windowStyle || null;};} else {console.error('Invalid values!');return false;};};
$.fn.cssBefore = function(argument, property) {return setPseudoElement({elements: this,pseudoElement: 'before',argument: argument,property: property});};$.fn.cssAfter = function(argument, property) {return setPseudoElement({elements: this,pseudoElement: 'after',argument: argument,property: property});};})();
$(function() {$('.element').cssBefore('content', '"New before!"');});

.element {width: 480px;margin: 0 auto;border: 2px solid red;}
.element::before {content: 'Old before!';}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="element"></div>

应该指定值，就像在jQuery.css的普通函数中一样

此外，你还可以获得pseudo-element参数的值，就像在jQuery.css的普通函数中一样:

console.log( $(element).cssBefore(parameter) );

JS:

(function() {document.pseudoElements = {length: 0};
var setPseudoElement = function(parameters) {if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) {if (!parameters.element.pseudoElements) parameters.element.pseudoElements = {styleSheet: null,before: {index: null,properties: null},after: {index: null,properties: null},id: null};
var selector = (function() {if (parameters.element.pseudoElements.id !== null) {if (Number(parameters.element.getAttribute('data-pe--id')) !== parameters.element.pseudoElements.id) parameters.element.setAttribute('data-pe--id', parameters.element.pseudoElements.id);return '[data-pe--id="' + parameters.element.pseudoElements.id + '"]::' + parameters.pseudoElement;} else {var id = document.pseudoElements.length;document.pseudoElements.length++
parameters.element.pseudoElements.id = id;parameters.element.setAttribute('data-pe--id', id);
return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement;};})();
if (!parameters.element.pseudoElements.styleSheet) {if (document.styleSheets[0]) {parameters.element.pseudoElements.styleSheet = document.styleSheets[0];} else {var styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);parameters.element.pseudoElements.styleSheet = styleSheet.sheet;};};
if (parameters.element.pseudoElements[parameters.pseudoElement].properties && parameters.element.pseudoElements[parameters.pseudoElement].index) {parameters.element.pseudoElements.styleSheet.deleteRule(parameters.element.pseudoElements[parameters.pseudoElement].index);};
if (typeof parameters.argument === 'object') {parameters.argument = (function() {var cloneObject = typeof parameters.argument.pop === 'function' ? [] : {};
for (var property in parameters.argument) {cloneObject[property] = parameters.argument[property];};
return cloneObject;})();
if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;
parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;parameters.element.pseudoElements[parameters.pseudoElement].properties = parameters.argument;};
var properties = '';
for (var property in parameters.argument) {if (typeof parameters.argument[property] === 'function')parameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]();elseparameters.element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property];};
for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';};
parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);} else if (parameters.argument !== undefined && parameters.property !== undefined) {if (!parameters.element.pseudoElements[parameters.pseudoElement].properties && !parameters.element.pseudoElements[parameters.pseudoElement].index) {var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length;
parameters.element.pseudoElements[parameters.pseudoElement].index = newIndex;parameters.element.pseudoElements[parameters.pseudoElement].properties = {};};
if (typeof parameters.property === 'function')parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property();elseparameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property;
var properties = '';
for (var property in parameters.element.pseudoElements[parameters.pseudoElement].properties) {properties += property + ': ' + parameters.element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; ';};
parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements[parameters.pseudoElement].index);};} else if (parameters.argument !== undefined && parameters.property === undefined) {var windowStyle = window.getComputedStyle(parameters.element, '::' + parameters.pseudoElement).getPropertyValue(parameters.argument);
if (parameters.element.pseudoElements) {return parameters.element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle;} else {return windowStyle || null;};} else {console.error('Invalid values!');return false;};};
Object.defineProperty(Element.prototype, 'styleBefore', {enumerable: false,value: function(argument, property) {return setPseudoElement({element: this,pseudoElement: 'before',argument: argument,property: property});}});Object.defineProperty(Element.prototype, 'styleAfter', {enumerable: false,value: function(argument, property) {return setPseudoElement({element: this,pseudoElement: 'after',argument: argument,property: property});}});})();
document.querySelector('.element').styleBefore('content', '"New before!"');

.element {width: 480px;margin: 0 auto;border: 2px solid red;}
.element::before {content: 'Old before!';}

<div class="element"></div>

^{GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/}

有人评论说附加一个完整的样式元素到头部元素，如果你只做一次，这还不错，但如果你需要重置它不止一次，你最终会有大量的样式元素。所以为了防止这种情况，我在头部创建了一个带有id的空白样式元素，并像这样替换它的innerHTML:

<style id="pseudo"></style>

然后JavaScript看起来是这样的:

var pseudo = document.getElementById("pseudo");
function setHeight() {let height = document.getElementById("container").clientHeight;pseudo.innerHTML = `.class:before { height: ${height}px; }`}
setHeight()

现在在我的例子中，我需要这个来根据另一个元素的高度来设置一个before元素的高度，它会在调整大小时发生变化，所以使用这个我可以在每次窗口调整大小时运行setHeight()，它会正确地替换<style>。

希望这能帮助那些被困在做同样事情的人。

我们还可以依赖自定义属性(又名CSS变量)来操作pseudo-element。从第一条中我们可以看出:

自定义属性是普通属性，因此可以在任何元素，都被解析为正常的继承和级联规则，可以用@media等条件规则做条件，可以用HTML的样式属性，可以用读取或设置使用CSSOM等。

考虑到这一点，我们的想法是在元素中定义自定义属性，伪元素将简单地继承它;因此，我们可以很容易地修改它。

# 0:

.box:before {content:var(--content,"I am a before element");color:var(--color, red);font-size:25px;}

<div class="box"></div><div class="box" style="--color:blue;--content:'I am a blue element'"></div><div class="box" style="--color:black"></div><div class="box" style="--color:#f0f;--content:'another element'"></div>

2)使用CSS和类

.box:before {content:var(--content,"I am a before element");color:var(--color, red);font-size:25px;}
.blue {--color:blue;--content:'I am a blue element';}.black {--color:black;}

<div class="box"></div><div class="box black" ></div><div class="box blue"></div>

3)使用javascript

document.querySelectorAll('.box')[0].style.setProperty("--color", "blue");document.querySelectorAll('.box')[1].style.setProperty("--content", "'I am another element'");

.box:before {content:var(--content,"I am a before element");color:var(--color, red);font-size:25px;}

<div class="box"></div><div class="box"></div>

4)使用jQuery

$('.box').eq(0).css("--color", "blue");/* the css() function with custom properties works only with a jQuery vesion >= 3.xwith older version we can use style attribute to set the value. Simply payattention if you already have inline style defined!*/$('.box').eq(1).attr("style","--color:#f0f");

.box:before {content:"I am a before element";color:var(--color, red);font-size:25px;}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><div class="box"></div><div class="box"></div><div class="box"></div>

它也可以用于复杂的值:

.box {--c:"content";--b:linear-gradient(red,blue);--s:20px;--p:0 15px;}
.box:before {content: var(--c);background:var(--b);color:#fff;font-size: calc(2 * var(--s) + 5px);padding:var(--p);}

<div class="box"></div>

You may notice that I am considering the syntax var(--c,value) where value is the default value and also called the fallback value.

From the same specification we can read:

The value of a custom property can be substituted into the value of another property with the var() function. The syntax of var() is:

var() = var( <custom-property-name> [, <declaration-value> ]? )

The first argument to the function is the name of the custom property to be substituted. The second argument to the function, if provided, is a fallback value, which is used as the substitution value when the referenced custom property is invalid.

And later:

To substitute a var() in a property’s value:

1. If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in the animation property or one of its longhands, treat the custom property as having its initial value for the rest of this algorithm.
2. If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property.
3. Otherwise, if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well.
4. Otherwise, the property containing the var() function is invalid at computed-value time.

If we don't set the custom property OR we set it to initial OR it contains an invalid value then the fallback value will be used. The use of initial can be helpful in case we want to reset a custom property to its default value.

Related

How to store inherit value inside a CSS variable (aka custom property)?

CSS custom properties (variables) for box model

我总是添加我自己的utils函数，就像这样。

function setPseudoElContent(selector, value) {document.styleSheets[0].addRule(selector, 'content: "' + value + '";');}
setPseudoElContent('.class::after', 'Hello World!');

或使用ES6功能:

const setPseudoElContent = (selector, value) => {document.styleSheets[0].addRule(selector, `content: "${value}";`);}
setPseudoElContent('.class::after', 'Hello World!');

我使用CSS0中定义的变量在CSS中修改:after(同样适用于:before)CSS1，特别是改变.sliding-middle-out:hover:after定义的anchor样式的background-color值和content值的另一个anchor(#reference)在下面的CSS2中使用JavaScript/jQuery生成随机颜色:

超文本标记语言

<a href="#" id="changeColor" class="sliding-middle-out" title="Generate a random color">Change link color</a><span id="log"></span><h6><a href="https://stackoverflow.com/a/52360188/2149425" id="reference" class="sliding-middle-out" target="_blank" title="Stack Overflow topic">Reference</a></h6><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.rawgit.com/davidmerfield/randomColor/master/randomColor.js"></script>

CSS

:root {--anchorsFg: #0DAFA4;}a, a:visited, a:focus, a:active {text-decoration: none;color: var(--anchorsFg);outline: 0;font-style: italic;
-webkit-transition: color 250ms ease-in-out;-moz-transition: color 250ms ease-in-out;-ms-transition: color 250ms ease-in-out;-o-transition: color 250ms ease-in-out;transition: color 250ms ease-in-out;}.sliding-middle-out {display: inline-block;position: relative;padding-bottom: 1px;}.sliding-middle-out:after {content: '';display: block;margin: auto;height: 1px;width: 0px;background-color: transparent;
-webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;-moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;-ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;-o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;transition: width 250ms ease-in-out, background-color 250ms ease-in-out;}.sliding-middle-out:hover:after {width: 100%;background-color: var(--anchorsFg);outline: 0;}#reference {margin-top: 20px;}.sliding-middle-out:before {content: attr(data-content);display: attr(data-display);}

JS / jQuery

var anchorsFg = randomColor();$( ".sliding-middle-out" ).hover(function(){$( ":root" ).css({"--anchorsFg" : anchorsFg});});
$( "#reference" ).hover(function(){$(this).attr("data-content", "Hello World!").attr("data-display", "block").html("");},function(){$(this).attr("data-content", "Reference").attr("data-display", "inline").html("");});

我已经创建了一个jQuery插件来添加css-伪规则，比如为特定的元素使用.css()。

• 插件代码和测试用例是在这里
• 用例为简单的CSS图像弹出在这里

用法:

$('body').css({backgroundColor: 'white'}).cssPseudo('after', {content: 'attr(title) ", you should try to hover the picture, then click it."',position: 'absolute',top: 20, left: 20}).cssPseudo('hover:after', {content: '"Now hover the picture, then click it!"'});

我有一些不同的东西给你，既简单又有效。

    <style>.case-after:after { // set your properties here like eg:color:#3fd309 !important;}.case-before:before { // set your properties here like eg:color:#151715 !important;}</style>// case for after$('#button-id').on('click', function() {$(".target-div").toggleClass('case-after');});
// case for before$('#button-id').on('click', function() {$(".target-div").toggleClass('case-before');});

下面的解决方案告诉你如何用javascript attr属性更新伪元素。

在HTML中添加一个属性，你可以用javascript setAttribute操作它。

<divid="inputBoxParent"count="0">...</div>

用js更新

inputBoxParent.setAttribute('count', value.length)

CSS -在伪元素中添加内容为attr(attributeName)

.input-box-container::after{content: attr(count);}

你完蛋了!!

const inputBoxParent = document.getElementById("inputBoxParent");const handleOnChange = (value) => {inputBoxParent.setAttribute('count', value.length)}

.input-box-container {position: relative;width: 200px;}.input-box-container::after{position: absolute;bottom: 8px;right: 10px;height: 10px;width: 20px;content: attr(count);}

<h4> Type some text inside the box and click outside to see resule i.e. pseudo element content change</h4><divid="inputBoxParent"class="input-box-container"count="0"><inputtype="text"id="inputBox"placeholder="type some thing"onchange="handleOnChange(this.value)"onkeyup="handleOnChange(this.value)"/></div>

这是我第一次在给出我自己的答案之前没有阅读所有给出的答案，所以我希望这不会让我…

在我的例子中，这是附加到a，div和button元素的图标所需要的，这与<i class="icon-class"></i>的工作有点不同，因为它们上没有icon-class类。但是添加第5条破坏了样式。

相反，我添加了一个data-icon属性，它的值应该是element::before { content: "HERE" }中的值，然后这个相当简单的JavaScript就会处理剩下的事情。

    {const fakeIcons = document.querySelectorAll('[data-icon]')
for (const iconElement of fakeIcons) {
const fakeClass = 'fake-' + Array.from(Array(20), () => Math.floor(Math.random() * 36).toString(36)).join('')const beforeContent = iconElement.getAttribute('data-icon')
iconElement.classList.add(fakeClass)
const style = document.createElement('style')style.type = 'text/css'style.innerHTML = `
.${fakeClass}::before {content: "${beforeContent}" !important;}
`document.getElementsByTagName('head')[0].appendChild(style)}}

代码解释道:

• 选择具有指定属性(data-icon)的所有元素
• 循环遍历它们
• 随机生成一个以fake-开头的类名，后面跟着一个随机的字母数字字符串
• 获取data-icon属性的值
• 向元素中添加随机生成的类
• 为::before伪元素设置内容创建先前获取的值的样式
• 在<head> HTML元素的末尾添加样式

只需设置伪之前或后的样式为inherit，然后用javascript设置父样式。

所以，例如，我想改变:之前的颜色风格，然后我设置:

.my-style::before{color: inherit;}

然后我用javascript改变.my-style元素上的颜色风格:

document.querySelector(".my-style").style.color = red;

工作完成了，超级简单