<p>Вибери потрібне значення для <code>content</code>:</p>
<p class="notice">Так як псевдоелементи ::before i ::after не є елементами DOM, їх не можна змінювати через JavaScript. Але є хитрість: змінювати значення атрибуту, який заданий для властивості content.</p>

<input type="text" placeholder="введи значення" id="field">

<hr>

<div id="block" data-before="CSS">, це ти?</div>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#field {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  font-size: 25px;
  color: #222;
  margin-top: 36px;
}

#block:before {
  content: attr(data-before);
  text-decoration: underline;  
  color: #444;
}

.notice {
  font-style: italic;
  text-align: left;
  padding-left: 16px;
  border-left: 1px solid #ddd;
  color: #444;
}
var block = document.getElementById('block');
var field = document.getElementById('field');

field.onchange = function() {
  block.setAttribute('data-before', this.value);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.