Как изменить свойства псевдоэлемента с помощью JavaScript

Раньше единственным свойством псевдоэлемента, которое можно было изменить с помощью JavaScript, было content. Теперь, с помощью пользовательских переменных CSS (также называемых пользовательскими свойствами CSS) и JavaScript, мы теперь можем легко изменить свойства в :after и :before. Давайте посмотрим, как мы можем это сделать.

Если вы не знаете, что такое пользовательская переменная CSS, MDN очень хорошо объясняет это здесь.

Самым большим преимуществом пользовательских переменных CSS по сравнению с переменными SCSS является то, что мы можем получить доступ к пользовательским переменным CSS с помощью JavaScript. Почему это полезно? Это полезно, потому что теперь мы можем создать пользовательскую переменную CSS в родительском элементе и связать ее с его псевдоэлементом.

Давайте посмотрим на пример ниже.

.element {
  --dynamic-width: 0%;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: 0 auto;

  &:after {
    content: "";
    display: block;
    background-color: #000;
    height: 2px;
    width: var(--dynamic-width);
    position:relative;
    left: 100%;
    top: 50%;
    transition: width 0.2s ease;
  }
}

Видите, как я связываю width из .element:after с --dynamic-width?

Во-первых, мы определяем переменную CSS --dynamic-width внутри .element, затем присваиваем ей начальное значение 0%.

Во-вторых, внутри псевдоэлемента .element мы возвращаем значение
--dynamic-width в ширину, поэтому значение --dynamic-width можно передать в свойство псевдоэлемента width.

Поскольку мы можем использовать JavaScript для доступа к пользовательским переменным CSS, мы можем изменить ширину .element:after через его родительский элемент.

Теперь вы можете использовать переменные JavaScript и CSS для изменения свойств псевдоэлементов!

let element = document.getElementsByClassName("element")[0];
element.style.setProperty("--dynamic-width", '50%');

Я собрал все вместе в этом Codepen для демонстрации. Просто измените значение --dynamic-width в JavaScript, чтобы увидеть эффект.

Первоначально опубликовано на сайте web-tricks 14 ноября 2018 г.