Как изменить или удалить :before и/или :after | JavaScript

• Поменять или задать content для before или after
• Удалить :before или :after
• Скрипт, чтобы изменить псевдоэлементы у NodeList
• textarea и innerHTML в Internet Explorer

Недавно задалась вопросом: как динамически изменить стиль CSS в :before или :after у элемента с помощью JavaScript?

Поменять или задать content для before или after на JavaScript

Самое простое решение в одну строку:

<style>
#raz:after {
  content: attr(data-after);
  background: yellow;
}
</style>

<button onclick="this.dataset.after = ' мой after'" id="raz">нажать</button>

То есть для элемента создаём новый атрибут data-after, в котором пишем содержимое для content у after

Удалить :before или :after

Можно задать другой стиль CSS с дополнительным class, где content имеет значение none. Щелчок по кнопке будет присваивать этот class элементу.

<style>
  #element {background: #fff5d7; border: 5px solid #fff5d7;}
  #element:before {content: ":before"; border-bottom: solid brown;} /* изначальный стиль */ 
  #element.new:before {content: none;} /* новый стиль */ 
</style>

<button onclick="delBefore();">удалить</button>
<div id="element"></div>

<script>
function delBefore() {
    var div = document.getElementById('element');
    div.className = 'new'; // задать класс
}
</script>

Скрипт, чтобы изменить псевдоэлементы у NodeList

А как быть, если вместо getElementById используется getElementsByName или querySelectorAll и т.п? Там работать нужно с массивом NodeList. Например, я хочу чтобы высота у :after каждого элемента составила четверть ширины элемента. Один класс на всех тут не подходит, поскольку ширина у элементов разная.

<style>
  #element {background: #fff5d7; border: 5px solid #fff5d7;}
  #element li {background: green;}
  #element li:nth-child(2) {background: blue; width: 30%; text-align: right;}
  #element li:after {content: ":after"; background: DarkSalmon; display: inline-block;}
</style>

<button onclick="borderWidth();">height = 1/4 ширины li</button>
<ol id="element">
<li>
<li>
</ol>

<script>
function borderWidth() {
 // eLi - каждый отдельный li
  [].forEach.call(document.querySelectorAll('#element li'), function(eLi) {
 // offsetWidth - ширина li
 // dataset.width в HTML выглядит как data-width (не работает в IE, поэтому можно просто применить title)
    eLi.dataset.width = eLi.offsetWidth/4;
    // следующие строки кода в head добавляют (подробнее про appendChild()): 
    // <style> #element li[data-width="207.75"]:after {border-bottom-width: 207.75px;} </style>
    // <style> #element li[data-width="62.25"]:after {border-bottom-width: 62.25px;} </style>
    var style = document.createElement('style');
    style.innerHTML = '#element li[data-width="' + eLi.dataset.width + '"]:after {height: ' + eLi.dataset.width + 'px;}';
    document.querySelector('head').appendChild(style);
  });
}
</script>