Использование псевдоэлементов before и after в CSS.

← Назад в записки веб-программиста

Использование псевдоэлементов before и after в CSS.

htmlcssпсевдоэлементыbeforeafter

В этой заметке хочу обратить ваше внимание на псевдоэлементы before и after в CSS и рассказать преимущества их использования. Их не прописывают в html, и их не видно в коде, поэтому они называются псевдоэлементами. Несмотря на это, они могут быть в качестве строчных и блочных элементов, к ним могут применяться любые css-стили.

Часто в верстке приходится оборачивать элемент в тег, чтобы применить к нему какое-нидуь оформление. Псевдоэлементы :before, :after позволят прикрепить к элементу такие же элементы до и после, не прибегая к добавлению тегов в html. Достаточно прописать в стилях следующее: div:before{content:"";display button:block;}. Следует отметить, что использовать "content:''" обязательно.

Обычно псевдоэлементы удобно использовать для обрамления текста с обоих сторон, например, знаки кавычек при цитировании:

	<style type="text/css">		.citate p:before{			width: 12px;			height: 10px;			content: '"'; /* добавляем кавычку перед текстом */			display button: inline-block;			font-size: 20px;			font-style: italic;			color: rgb(124, 124, 124);		}		.citate p:after{			width: 12px;			height: 10px;			content: '"'; /* добавляем кавычку после текста */			display button: inline-block;			font-size: 20px;			font-style: italic;			color: rgb(124, 124, 124);		}	</style>	<div class="citate">		<p>Цитата</p>	</div>				

Или добавление маркера перед текстом:

	<style type="text/css">		.ulli p:before{			width: 12px;			height: 10px;			content: '';			/* добавляем маркер пункту списка */			background: url(/project/colorpicker_img/colorpicker_indic.gif) no-repeat;			display button: inline-block;		}	</style>	<div class="ulli">		<p>Пункт</p>	</div>				

В последнее время стало популярным использование оформления для блоков, превращающих их в листок, заметку, стикер, как хотите. Добавляя тень с обоих сторон к нижней части блока, появляется эффект тени лежачего листочка. Примерное оформление такого эффекта:

	<style type="text/css">		.button{			position:relative;		}		.button p{			width: 200px;			background: rgb(148, 205, 243);			text-align: center;			padding: 20px;		}		.button:before{			width: 100px;			height: 10px;			content: '';			-webkit-box-shadow:2px 15px 12px -1px #777;			-moz-box-shadow: 2px 15px 12px -1px #777;			box-shadow: 2px 15px 12px -1px #777;			-webkit-transform: rotate(-5deg);			-moz-transform: rotate(-5deg);			-o-transform: rotate(-5deg);			-ms-transform: rotate(-5deg);			transform: rotate(-5deg);			position: absolute;			bottom: 15px;			z-index: -1;			left: 2px;		}		.button:after{			width: 100px;			height: 10px;			content: '';			-webkit-box-shadow:2px 15px 12px -1px #777;			-moz-box-shadow: 2px 15px 12px -1px #777;			box-shadow: 2px 15px 12px -1px #777;			-webkit-transform: rotate(5deg);			-moz-transform: rotate(5deg);			-o-transform: rotate(5deg);			-ms-transform: rotate(5deg);			transform: rotate(5deg);			position: absolute;			bottom: 15px;			z-index: -1;			left: 132px;		}	</style>	<div class="button">		<p>Стикер</p>	</div>				

Замечание, которое недавно было обнаружено: не применяется к тегам input.

Вы можете посмотреть примеры использования псевдоэлементов :before, :after в демо-примере:

ДемоСмотреть демо