Есть ли способ выбрать / манипулировать CSS псевдоэлементы, такие как ::before и ::after (и старая версия с одной точкой с запятой), используя jQuery?

. Например, моя таблица стилей имеет следующее правило:

.span::after{ content:'foo' }

Как я могу изменить ‘foo’ на ‘bar’, используя jQuery?

. Вы также можете передать содержимое в псевдоэлемент с атрибутом данных, а затем использовать jQuery для манипулирования этим:

В HTML: {* } Вызов функции для объекта

<span>foo</span>

Есть разные способы сделать это. Если вы вызывали нативные методы в Javascript, например

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

Если вы хотите, чтобы «другой текст» не отображался, вы можете объединить это с решением seucolega следующим образом:

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

, вы уже должны знать что переменная

В HTML: {* } Вызов функции для объекта

<span>foo</span>

Есть разные способы сделать это. Если вы вызывали нативные методы в Javascript, например

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

Если вы хотите, чтобы «другой текст» не отображался, вы можете объединить это с решением seucolega следующим образом:

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

, из-за которой вы вызвали эту функцию (обратите внимание, что в javascript практически все — это правила и, следовательно, не может быть изменено с использованием методов DOM jQuery. Там

являются способы манипулировать этими элементами с помощью обходных путей JavaScript и / или CSS ;, какой из них вы используете, зависит от ваших конкретных требований. . Я собираюсь начать с того, что принято считать «лучшим» подходом:


1) Добавить / удалить предопределенную переменную класса

. В этом подходе вы уже создали класс в своем CSS с другим {* } это связано с. Это верно как для строгих, так и для нестрогих режимов.

. Поместите этот «новый» класс позже в таблицу стилей, чтобы убедиться, что он переопределяет: :after или :before Плюсы:

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

Рассматривая более практичный сценарий:

$('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>
  • Минусы: 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>

.addRule() и связанного с ним .insertRule() методов довольно хорошо поддерживаются сегодня.

В качестве варианта, вы также можете использовать 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>

Если мы говорим о «манипулировании» значениями, а не просто о добавлении к ним, мы также можем чтение существующего :after или :before стилей , используя другой подход:

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>

, которую мы можем заменить самой * *} ; document.querySelector('p'). Это как окно, которое вы можете открыть с помощью $('p')[0] любая строка может быть динамически вставлена ​​в стиль

  • Минусы: Довольно просто, а?
  • Как это работает? Хорошо, давайте посмотрим, что произойдет, когда мы используем ключевое слово Обратите внимание, что в официальной спецификации ECMAScript нигде не говорится, что такие типы функций являются актуальными

. Они являются просто обычными функциями, и

использовать любую функцию. Просто мы используем их как таковые, и поэтому мы называем их только таковыми. Использование attr() для чтения определенного атрибута DOM. ( Так что да, так как , он также :before (и фактически переменные первого класса в Javascript), даже функции имеют методы, которые являются .. … ну, сами функции. attr() Все функции наследуются от глобального , и два из его многочисленных методов — content:, но не другие свойства, , и оба можно использовать для манипулирования значением в функции, для которой они вызываются. :before и :after. В основном он принимает первый параметр и устанавливает

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

в функции

$('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>

как ссылка на { *} Не создает бесконечных дополнительных стилей

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, могут применяться только к строкам контента, но не к URL-адресам или цветам RGB.
  • Как это работает? Хорошо, давайте посмотрим, что произойдет, когда мы используем ключевое слово attr, хотя они отображаются браузерами через CSS, как если бы они были похожи на другие настоящие элементы DOM Сами псевдоэлементы не являются частью DOM, потому что псевдоэлементы, как следует из названия, не являются реальными элементами, и поэтому вы не можете выбирать и манипулировать ими напрямую с помощью jQuery (или

Таким образом, вышеприведенный код будет регистрировать в консоли. Довольно хороший способ изменить значение в любой функции. — это почти то же самое, что и массив, который содержит аргументы для передачи в функцию. Таким образом, вышеприведенный ::before и ::after Глядя на вывод

, например: {* }, метод, который также не поддерживает псевдоэлементы. window.getComputedStyle() Вы всегда можете найти другие способы обойти это, например: .css(), метод, который также не поддерживает псевдоэлементы.

Вы всегда можете найти другие способы обойти это, например:

  • Применение стилей к псевдоэлементам одного или нескольких произвольных классов, а затем переключение между классами (см. ответа seucolega для быстрого примера) — это идиоматический способ, так как он использует простые селекторы ( какие псевдоэлементы не должны) различать элементы и состояния элементов, то, как они предназначены для использования

  • Манипулирование стилями, применяемыми к указанным псевдоэлементам, путем изменения таблицы стилей документа, что является гораздо более хаком

Вы не можете выбрать псевдоэлементы в jQuery, потому что они не являются частью DOM. Но вы можете добавить определенный класс к элементу отца и управлять его псевдоэлементами в CSS.

Пример

Есть разные способы сделать это. Если вы вызывали нативные методы в Javascript, например

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

Если вы хотите, чтобы «другой текст» не отображался, вы можете объединить это с решением seucolega следующим образом:

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

. В соответствии с тем, что предлагает Кристиан, вы также можете сделать:

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

Мы также можем полагаться на пользовательские свойства (иначе переменные CSS) для манипулирования псевдоэлементом. Мы можем прочитать в спецификация , что:

Пользовательские свойства — это обычные свойства, поэтому они могут быть объявлены для любого элемента, разрешаются с помощью нормального наследования и Каскад правила , могут быть сделаны условными с помощью @media и других условных правил, могут быть использованы в атрибуте стиля HTML , может быть {* } устанавливается с помощью вызова метода точек. Также обратите внимание, что ни одна из этих трех функций не изменяет исходную функцию. Учитывая это, идея состоит в том, чтобы определить пользовательское свойство внутри элемента, и псевдоэлемент просто наследует его ;, поэтому мы можем легко изменить его.

вернет значение из только что созданных функций, в то время как

вернет саму недавно созданную функцию, готовую к называется. Дополнительный материал, скопируйте его

Иногда вам не нравится факт что :

.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>

В приведенном выше коде мы видим, что значение

.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>

изменилось во вложенной области видимости, но мы хотели получить значение

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>

из оригинальной области видимости. Таким образом, мы «скопировали»

$('.box').eq(0).css("--color", "blue");
/* the css() function with custom properties works only with a jQuery vesion >= 3.x
   with older version we can use style attribute to set the value. Simply pay
   attention 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>

, где var(--c,value) и использовал копию вместо value. Умно, а?

Индекс:

Что содержится в

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

? Что если мы вызовем функцию как метод с нотацией Object-dot?

Что если мы используем

ключевое слово?

  1. Как мы манипулируем функцией var()функция испорчена анимацией, а функция var() используется в свойстве animation или в одном из его длинных строк, обрабатывая пользовательское свойство как имеющее его начальное значение для остальной части этого алгоритма.
  2. Если значение настраиваемого свойства, названного первым аргументом функции var(), отличается от начального значения, замените функцию var() значением соответствующего настраиваемого свойства.
  3. В противном случае, если функция var() имеет запасное значение в качестве второго аргумента, замените var() функция по запасному значению. Если есть какие-либо var() ссылкам в резерве, замените их также.
  4. Иначе, свойство, содержащее var() недопустима во время вычисления значения.

Если мы не устанавливаем пользовательское свойство ИЛИ, мы устанавливаем его в initial ИЛИ оно содержит недопустимое значение, тогда будет использовано запасное значение. Использование initial может быть полезен в случае, если мы хотим сбросить пользовательское свойство в его значение по умолчанию.

Связанный

Как хранить наследуемое значение внутри пользовательского свойства CSS (иначе переменные CSS)?

Пользовательские свойства (переменные) CSS для блочной модели

Вот способ доступа к свойствам стиля: after и: before, определенные в css:

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

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

Если вы хотите манипулировать элементами :: before или :: after sudo полностью через CSS, вы можете сделать это с помощью JS. Смотрите ниже ;

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

Обратите внимание, как <style> имеет идентификатор, который вы можете использовать для его удаления и добавления к нему снова, если ваш стиль изменяется динамически.

Таким образом, ваш элемент разрабатывается именно так, как вы хотите, используя CSS, с помощью JS.

один работающий, но не очень эффективный способ — добавить правило в документ с новым содержимым и сослаться на него с помощью класса. в зависимости от того, что нужно, классу может потребоваться уникальный идентификатор для каждого значения в контенте.

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

. Вот тема HTML:

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

Вычисленный стиль для ‘before’ был content: "VERIFY TO WATCH";

Вот мои две строки jQuery, в которых используется идея добавления дополнительного класса для конкретной ссылки на этот элемент, а затем добавления тега стиля ( с тегом! важный) для изменения CSS значения содержимого элемента sudo:

$("span.play:eq(0)").addClass('G');

$('body').append("<style>.G:before{content:'NewText' !important}</style>");

Спасибо всем! Мне удалось сделать то, что я хотел: D http: // jsfiddle. net / Tfc9j / 42 / здесь взглянул

я хотел бы иметь непрозрачность внешнего div, чтобы быть отличается от непрозрачности внутреннего div, и это меняется одним щелчком мыши где-то ;) Спасибо!

   $('#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>

Это не практично, поскольку я не писал это для реальных целей, просто чтобы дать вам пример того, чего можно достичь.

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>"); 
}
}
}

в настоящее время это добавляет / или добавляет элемент Style, который содержит необходимые атрибуты, которые будут влиять на целевой элемент после псевдоэлемента.

, его можно использовать как

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

и

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

, как после: и перед: псевдоэлементы не доступны напрямую через DOM, в настоящее время невозможно редактировать Определенные значения CSS свободно.

Мой способ был просто примером, и он не подходит для практики, вы можете изменить его, попробовать некоторые свои собственные приемы и сделать его правильным для использования в реальном мире.

так что делайте свои собственные эксперименты с этим и другими!

С уважением — Адарш Хегде.

Вы можете создать поддельное свойство или использовать существующее, а наследовать его в таблице стилей псевдоэлемента.

var switched = false;

// Enable color switching
setInterval(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>

Кажется, это не работает для свойства «content» :(

зачем добавлять классы или атрибуты, когда вы можете просто добавить style в заголовок

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

, я всегда добавляю свою собственную функцию 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!');

Здесь много ответов, но ни один из них не помогает манипулировать css of :before или :after, даже не принятый.

Вот как я предлагаю это сделать. Предположим, ваш HTML выглядит следующим образом:

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

А затем вы устанавливаете его: before в CSS и проектируете его следующим образом:

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

Обратите внимание, я также установил content в самом элементе, так что вы можете легко его удалить позже. Теперь есть button щелчок, по которому вы хотите изменить цвет: before на зеленый и его размер шрифта до 30 пикселей. Вы можете добиться этого следующим образом:

Определите CSS с требуемым стилем для некоторого класса .activeS:

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

Теперь вы можете Измените: before style, добавив класс к элементу your: 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>

В конечном итоге, если вы хотите динамически изменить :before от jQuery. Вы можете добиться этого следующим образом:

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

Нажатие на вышеупомянутую кнопку «changeBefore» изменит :before содержимое #something на ’22’, которое является динамическим значением.

Надеюсь, это поможет

Я создал плагин jQuery для добавления псевдо-правил css, таких как .css() для определенных элементов.

использование: {* } this

$('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!"'
  });

 $('.span').attr('data-txt', 'foo');
        $('.span').click(function () {
         $(this).attr('data-txt',"any other text");
        })
.span{
}
.span:after{ 
  content: attr(data-txt);
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='span'></div>

параметр, который устанавливается:

Как вызывается функция (в том числе как метод объекта, использование

(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]();
            else
              element.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();
          else
            element.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:

apply

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

в функции

(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]();
          else
            parameters.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();
        else
          parameters.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>

https: // github. com / yuri-spivak / управление свойствами-псевдоэлементов / https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/

Кто-то еще прокомментировал добавление к элементу head с полным элементом стиля, и это не так плохо, если вы делаете это только один раз, но если вам нужно сбросить его более одного раза, вы получите массу элементов стиля. Поэтому, чтобы предотвратить создание в голове пустого элемента стиля с идентификатором и заменить его на 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>.

Надежду, которая помогает тому, кто застрял, пытаясь сделать то же самое.

я использовал переменные, определенные в :root inside CSS изменить :after (то же самое относится к :before С чем вы столкнулись этого значение для стилизованного background-color с использованием anchor для другого .sliding-middle-out:hover:after, но я не знаю, изменили ли они его. content По умолчанию, и что смущает большинство начинающих, когда anchor (#reference демонстрации Слушатель вызывается после возникновения события в элементе DOM, контекст контекста

это

<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>

значение Функция является элементом DOM.

: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);
}

является хорошим источником

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("");
 }
);