Псевдоэлементы 1

by fersterin

HTML

<div class="dog1">Lorem ipsum dolor sit.</div>
<div class="dog2">Lorem ipsum dolor sit.</div>
<div class="dog3">Lorem ipsum dolor sit.</div>
<div class="dog4">Lorem ipsum dolor sit.</div>
<div class="dog5"></div>
<div class="dog6"></div>
<div class="dog7"></div>
<div class="dog8"></div>
<div class="dog9"></div>

CSS

/* Вывод в контент после содержимого элемента */
.dog1::after {
	content: "за Путина!";
	color: #333;
	background: #fc0;
	font-size: 90%;
	padding: 2px;
}
.dog2::before {
	content: "за Навального!";
	color: #333;
	background: #fc0;
	font-size: 90%;
	padding: 2px;
}
.dog3::before {
	content: " ";
	width: 1em;
	height: 1em;
	display: inline-block;
	background: #667788;
}
.dog4::before {
	content: "\2603";
	display: inline-block;
	background: #667788;
	color: #fff;
	display: inline-block;
	padding: 0 4px 0 4px;
}
body {
	padding: 30px;
}