Иногда в вёрстке нужны какие-то мелкие элементы различной формы. В таких случаях мы можем использовать изображения. Но что, если таких элементов много? :after и :before позволяют добавить элементы не затрагивая разметку.
Данные псевдо-элементы используются для создания декоративного контента в верстке. Они являются частью блока, к которому они принадлежат. :before – это часть которая отображается перед элементом, а :after – после.
По умолчанию :after и :before имеют свойство display: inline.
Синтаксис с одним двоеточием :before/:after это CSS2 а с двумя ::before/::after – CSS3. Для IE8 используется синтаксис CSS2. Современные браузеры поддерживают оба варианта.
Контента созданного с помощью :after и :before нет в DOM, однако управлять мы им можем.
В стилях этих составляющих всегда должно присутствовать свойство content=''. Оно может быть пустым если мы хотим создать свою фигуру, но оно обязательно.
Использовать мы можем их при создании различных форм, в оформлении блоков комментариев, кнопок, текстов, в создании своих иконок.
Верстка и Дизайн
CSS - коротко о главном.
Как создать сложные формы в верстке.
Данные псевдо-элементы используются для создания декоративного контента в верстке. Они являются частью блока, к которому они принадлежат. :before – это часть которая отображается перед элементом, а :after – после.
По умолчанию :after и :before имеют свойство display: inline.
Синтаксис с одним двоеточием :before/:after это CSS2 а с двумя ::before/::after – CSS3. Для IE8 используется синтаксис CSS2. Современные браузеры поддерживают оба варианта.
Контента созданного с помощью :after и :before нет в DOM, однако управлять мы им можем.
В стилях этих составляющих всегда должно присутствовать свойство content=''. Оно может быть пустым если мы хотим создать свою фигуру, но оно обязательно.
Использовать мы можем их при создании различных форм, в оформлении блоков комментариев, кнопок, текстов, в создании своих иконок.
Пример:
HTML:
<div class=”love”></div>
CSS:
.love {
position: relative;
margin: 20% 0 0 50%;
width: 100px;
height: 80px;}
.love:before, .love:after {
content: "";
position: absolute;
left:50px ;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.love:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;}
#css