Псевдоэлементы ::before и ::after

Что такое псевдоэлемент?

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

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

Псевдоэлементы являются строчными элементами, и работают только со свойством content: " ", в котором прописывается содержимое для вставки.

Без этого свойства псевдоэлементы работать не будут.

Рассмотрим пример:

Будем использовать сразу оба псевдоэлемента, хотя их используют в основном по отдельности.

Напишем небольшой HTML-код

<p class="psv">Я рад приветствовать Вас на этом сайте.</p>

Естественно будет выведен абзац (я его выделил для наглядности).

Я рад приветствовать Вас на этом сайте.

А теперь внесем некоторые изменения:

.psv::before {
  content:"Здравствуйте!" ;
  color: #1048c4;
}
.psv::after {
  content:"Спасибо!!!" ;
  color: #c4104e;
}

Здесь мы не только применили псевдоэлементы, но и поменяли цвет текста. (Если нужно, можно прописать любые стили.) И вот что получилось:

Я рад приветствовать Вас на этом сайте.

Но не только текстовые «вставки» можно использовать с данными псевдоэлементами.

Если content: " " оставлять пустым, но не удалять его, то в этом случае псевдоэлемент можно использовать как обычный блок.

Следующий пример:

<div class="block">Это обычный блок</div>

.block {
  width: 400px;
  height: 150px;
  background-color: #777;
  color:#fff;
  text-align:center;
}
.block::before {
  content: "";
  width: 50px;
  height: 50px;
  display: block;
  background-color: red;
}
.block::after {
  content: "";
  width: 50px;
  height: 50px;
  display: block;
  background-color: green;
  margin: 0 300px;
}

В данном варианте мы получили 3 блочных элемента, хотя в HTML-коде прописан только один.

Вставляем картинки и спецсимволы

С картинками все просто.

p::before {
  content: url(image.jpg);
}

При использовании свойства content: " " для вставки картинки кавычки ( " ") не ставятся, иначе просто выводится текст url(image.jpg).

Если со вставкой картинки все просто: выбрал картинку, при необходимости изменил размер, откорректировал положение относительно текста, вот и все.

Добавление спецсимвола имеет ряд особенностей.

Для примера возьмем всем известный знак копирайта ©.
Если вставить его обычным способом, используя символьный код content: " © ", то и получим ©. Если убрать кавычки, как в примере с картинкой content: © , то ничего не выводится. Попытка использовать числовой код © приведет к тем же результатам.

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

<p> Все права защищены</p>

p::before{
  content:" \a9";
}

Результат:

Все права защищены

Но беда в том, что в основном на практике используются либо символьный код, либо числовой. И найти тот, или иной код спецсимвола в шестнадцатеричной кодировке проблематично.

Поэтому рекомендую воспользоваться переводчиком десятичного кода в шестнадцатеричный. Нужно вводить только числовой код спецсимвола, без значков &#):

В таблице приведены несколько примеров, чтобы можно было не покидая сайта проверить работу переводчика, и увидеть результат.

Вставка иконок из иконочных шрифтов

На многих сайтах кроме обычных шрифтов подключены и иконочные. Иконки можно подключить в HTML-документе при помощи тегов span или i, но можно это сделать и файле стилей при помощи превдоэлементов ::before и ::after.

Подключение схоже с подключением спецсимволов, но есть небольшие отличия. Код иконки через десятично-шестнадцатиричный калькулятор получить не получится, его можно найти в файле стилей, который идет вместе со штифтом.

Также нужно указать, какой шрифт используется. У меня подключен ‘FontAwesome’ , все остальное: цвет, размер, оформление — на свой вкус.

<p class="search">Поиск</p>
<p class="film">Просмотреть</p>
<p class="book">Читать</p>
<p class="print">Распечатать</p>

А теперь добавим иконки.

`
.search::before {
  content:"\f002";
  font-family:'FontAwesome';
  color:red;
  margin: 0 10px 0 7px;
}
.film::before {
  content:"\f008";
  font-family:'FontAwesome';
  color:green;
  margin-right: 10px;
  border-left: 3px solid green;
  padding-left: 4px;
}
.book::before {
  content:"\f02d";
  font-family:'FontAwesome';
  color:blue;
  margin-right: 10px;
  border: 1px solid blue;
  padding: 4px;
}
.print::before {
  content:"\f02f";
  font-family:'FontAwesome';
  color:orangered;
  margin-right: 10px;
  border: 1px solid orangered;
  padding: 4px;
  border-radius: 50%;
}

И вот результат:

Поиск

Просмотреть

Читать

Распечатать

Оформление текста

С помощью псевдоэлементов из простого абзаца можно изготовить контейнер для вопросов

<p class="ques">Имею вопрос:<br>
Летели два крокодила. Один-зеленый. Другой-в Африку. Сколько весит килограмм картошки???</p> 

      /*Оформление внешнего вида*/
.ques {
    background: #4691DE; 
    border: 3px double #7DDEDE;
    display: block;
    position: relative;
    padding: 45px 50px;
    color: #E1F1FF;
}               
      /*Добавляем рисунок слева вверху*/
.ques::before{ 
    content: url(img.png);
    position: absolute;
    left: 20px;
    top: 20px;
}         
     /*Добавляем рисунок снизу справа*/
.ques::after {
    content: url(img.png); 
    position: absolute;
    right: 20px;
    bottom: 20px;
} 
     /*Задаем стили для первой строки*/ 
.ques::first-line {
    font:20px bold ;
    color:#2C3C8B;
}

Результат

Имею вопрос:
Летели два крокодила. Один-зеленый. Другой-в Африку. Сколько весит килограмм картошки???

Зеркальное отражение элемента

Раньше для того, чтобы получить зеркальное отражение элемента использовали либо графический редактор (типа Photoshop-a), либо Javascript.

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

Ну что ж, сделаем зеркальное отражение небольшого текста.

<div class="mirror">
 <p title="Пример зеркального отражения на CSS3" class="mirr">Пример зеркального отражения на CSS3</p>
</div>

В коде тегу <p> присвоим атрибут title, в котором пропишем точно такой же текст, как и в самом абзаце. Для чего это сделано станет понятно далее.

Настала очередь CSS3

Прописываем стили для div class = " mirror " и p class = " mirr "

.mirror {
   height: 180px;
   background: #fff
   border: 3px double #ccc;
 }   
.mirr {
   color: #2C2A6E;
   font-size: 30px;
   margin: 50px 0 80px 0;
   text-align: center;
   background: #fff;
   position: relative; 
   width: 99%;
   transform: rotate(-3deg);
   text-shadow: 1px 1px 1px ;
   border-bottom: 1px solid;
}

Исходный текст с небольшим наклоном и легкой тенью готов, приступаем к созданию его отражения.

Для этого воспользуемся псевдоэлементами ::after и ::before и функцией attr( ), которая возвращает значение атрибута выбранного селектора ( в данном случае атрибут title).

.mirr:after { 
   content: attr(title); /*извлекаем значение атрибута, т.е исходный текст */
   position: absolute;
   z-index: 1; 
   left:0px;
   top: 110%; /* изменяя это значение, как бы отодвигаем отражение от оригинала, при 100% они расположены вплотную друг к другу */
   width: 100%;
   height: 90%;
   transform: scaleY(-1); /* Переворачиваем текст*/	 
}

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

.mirr:before {
   content: "";
   display: block;
   width: 100%;
   height: 120%; /* подбираем в зависимости о того, какая часть отражения будет видна */
    /* градиент с эффектом полупрозрачности, сходящей на "нет" */
   background:linear-gradient(top, rgba(255,255,255,0.7), rgba(255,255,255,1)); 
   position: absolute;
   z-index: 2; /*"накрываем градиентом" перевернутый текст */
   left:0px;
   top: 90%; /* изменяем в зависимости от необходимого эффекта затухания */
}

И вот результат: