В этой заметке хочу обратить ваше внимание на псевдоэлементы before и after в CSS и рассказать преимущества их использования. Их не прописывают в html, и их не видно в коде, поэтому они называются псевдоэлементами. Несмотря на это, они могут быть в качестве строчных и блочных элементов, к ним могут применяться любые css-стили.
Часто в верстке приходится оборачивать элемент в тег, чтобы применить к нему какое-нидуь оформление. Псевдоэлементы :before, :after позволят прикрепить к элементу такие же элементы до и после, не прибегая к добавлению тегов в html. Достаточно прописать в стилях следующее: div:before{content:"";display:block;}. Следует отметить, что использовать "content:''" обязательно.
Обычно псевдоэлементы удобно использовать для обрамления текста с обоих сторон, например, знаки кавычек при цитировании:
<style type="text/css"> .citate p:before{ width: 12px; height: 10px; content: '"'; /* добавляем кавычку перед текстом */ display: inline-block; font-size: 20px; font-style: italic; color: rgb(124, 124, 124); } .citate p:after{ width: 12px; height: 10px; content: '"'; /* добавляем кавычку после текста */ display: 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: 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 в демо-примере: