EN
CSS - insert text to element using styles only
0
points
In this article, we would like to show you how to insert text to element using styles only
Quick solution:
.class-name::before { /* pseudo-element that is the first child of the selected element(s) */
content: 'content before';
}
.class-name::after { /* pseudo-element that is the last child of the selected element(s) */
content: 'content after';
}
Note:
The
::beforeand::afterelements are inline by default.
Practical example
In order to insert text to the element using styles only, we use ::before and ::after pseudo elements. They allow us to add content property to the selected element (::before - as the first child, ::after - as the last child of the selected element).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.class-name::before { /* pseudo-element that is the first child of the selected element(s) */
content: 'content before...';
}
.class-name::after { /* pseudo-element that is the last child of the selected element(s) */
content: '...content after';
}
</style>
</head>
<body>
<div class="class-name">some text</div>
</body>
</html>