- PVSM.RU - https://www.pvsm.ru -

Популярно о псевдоэлементах :Before и :After

Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

Популярно о псевдоэлементах :Before и :After

Всего существует несколько типов псевдоэлементов: :first-line, :first-letter, ::selection, :before и :after. В этой статье подробно рассмотрены последние два, как наиболее полезные.

Синтаксис и поддержка браузерами

Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов:

Популярно о псевдоэлементах :Before и :After

Но в любом случае, современные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно.

Пример использования псевдоэлементов

<p>  
<span>:before</span>   
    Это основной контент.
<span>:after</span>  
</p>  

Элементы :before и :after не будут сгенерированы, т.е. не будут видны в коде страницы, поэтому они и называются псевдоэлементами.

Использование

Использовать псевдоэлементы крайне просто: :before добавляется перед нужным элементом, а :after — после.
Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content [1].

Простой пример: необходимо добавить кавычки для цитаты:

Популярно о псевдоэлементах :Before и :After

blockquote:before {  
    content: open-quote;  
}  
blockquote:after {  
    content: close-quote;  
}  

Стилизация псевдоэлементов

К псевдоэлементом можно применять такие же стили, как и к «реальным»: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.

Популярно о псевдоэлементах :Before и :After

blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: left;  
    position: relative;  
    top: 30px;  
  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
}  

Созданные элементы по умолчанию inline-элементы [2], поэтому при указании высоты или ширины необходимо установить display: block:

Популярно о псевдоэлементах :Before и :After

blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: left;  
    position: relative;  
    top: 30px;  
    border-radius: 25px;  
  
    /** define it as a block element **/  
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
    border-radius: 25px;  
  
    /** define it as a block element **/  
    display: block;  
    height: 25px;  
    width: 25px;  
}  

Также внутри псевдоэлемента можно использовать картинку вместо обычного текста, и даже добавлять фоновое изображение.

Популярно о псевдоэлементах :Before и :After

blockquote:before {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: left;  
    position: relative;  
    top: 30px;  
    border-radius: 25px;  
  
    background: url(images/quotationmark.png) -3px -3px #ddd;  
  
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
    border-radius: 25px;  
  
    background: url(images/quotationmark.png) -1px -32px #ddd;  
  
    display: block;  
    height: 25px;  
    width: 25px;  
}  

В этом примере свойство content содержит пустую строку, это необходимо, иначе псевдоэлемент не будет правильно отображаться.

Использование вместе с псевдоклассами

Псевдоэлементы могут быть использованы вместе с псевдоклассами, в нашем примере это поможет добавить hover-эффект кавычкам:

Популярно о псевдоэлементах :Before и :After

blockquote:hover:after, blockquote:hover:before {  
    background-color: #555;  
}  

Добавление transition-эффекта

Также можно применить свойство transition для плавного изменения цвета кавычек:

transition: all 350ms;  
-o-transition: all 350ms;  
-moz-transition: all 350ms;  
-webkit-transition: all 350ms; 

К сожалению, это нормально работает только в последних версиях Firefox.

Посмотреть демонстрацию примера [3] из этой статьи.

Немного вдохновения

Три примера использования псевдоэлементов :before и :afte:

Fascinating Shadows [4]

Популярно о псевдоэлементах :Before и :After

3D Button [5]

Популярно о псевдоэлементах :Before и :After

Stacked Image Effect [6]

Популярно о псевдоэлементах :Before и :After

Автор: grokru


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/16918

Ссылки в тексте:

[1] CSS-свойством content: http://css-tricks.com/css-content/

[2] inline-элементы: http://webdesign.about.com/od/htmltags/g/bldefinlineelem.htm

[3] демонстрацию примера: http://koulikov.com/wp-content/uploads/2012/10/pseudoelements/

[4] Fascinating Shadows: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

[5] 3D Button: http://www.esecamalich.com/blog/before-&-after/

[6] Stacked Image Effect: http://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/