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:
xxxxxxxxxx1
.class-name::before { /* pseudo-element that is the first child of the selected element(s) */2
content: 'content before';3
}4
5
.class-name::after { /* pseudo-element that is the last child of the selected element(s) */6
content: 'content after';7
}Note:
The
::beforeand::afterelements are inline by default.
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).
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.class-name::before { /* pseudo-element that is the first child of the selected element(s) */7
content: 'content before...';8
}9
10
.class-name::after { /* pseudo-element that is the last child of the selected element(s) */11
content: '...content after';12
}13
14
</style>15
</head>16
<body>17
<div class="class-name">some text</div>18
</body>19
</html>
