CSS Variables

by Bacher

HTML

<div class="line">
  HELLO WORLD
</div>

CSS

.line {
  --line-color: blue;
  background: var(--line-color);
}

.line:hover {
  --line-color: red;
}

JavaScript

const line = document.querySelector('.line');

line.addEventListener('click', () => {
	line.style.setProperty('--line-color', '#000');
});