CSS :: Псевдоэлемент ::before

Псевдоэлемент ::before (от англ. before – перед) позволяет выбрать элементы требуемого типа, перед которыми вставляется предопределенное содержимое, указанное в качестве значения стилевого свойства content. Например, p::before {блок объявлений}.

Селекторы псевдоэлементов выбирают элементы требуемого типа, явно не указанные в дереве элементов html-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями «::».

Синтаксис

<селектор>::before {блок объявлений}

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-pseudo-4/#generated-content

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/::before

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		/* Вставим перед элементами красные звездочки. */
		div::before, p::before{
		content: "***";
		color: red;			 
		}
		
		/* Вставим после элементов синие звездочки. */	
		p::after, div::after{
		content: "***";
		color: blue;			 
		}
		
	</style>
	
</head>
<body>
	
	<div>
		У меня вначале стоят красные звездочки,<br>
		а в конце синие!
	</div>
	
	<p>
		Что ты говоришь?<br>
		У меня, представь, тоже)))
	</p>
	
</body>
</html>

Пример №1