<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.