5 приемов с псевдоэлементами before after CSS 3

Большинство людей считает, что большой разницы между псевдоклассами и CSS active нет. Но одно различие между ними все-таки существует.

Мы все знаем, что эти классы и элементы используются как часть CSS3. Данные псевдоэлементы были определены в CSS3.

Псевдоклассы и псевдоэлементы CSS - в чем разница?

Псевдокласс: Используется как селектор для элементов, которые нельзя задать с помощью простых селекторов. А также эффекты CSS, которые не могут быть заданы с помощью конкретных селекторов.

Например, :hover, :active

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

Например, ::after, ::before

Для псевдоклассов мы используем одно двоеточие (:), а для псевдоэлементов - двойное (::), которое является частью синтаксиса CSS3. Браузеры поддерживают оба типа синтаксиса, но в IE (ниже 9 версии) не поддерживается формат двойного двоеточия (::).

Важным свойством псевдоэлементов hover active CSS является content: “ ”.

Значения свойства content:

content: ""
content: "любое конкретное значение"

Теперь рассмотрим приемы работы с псевдоэлементами.

Метод 1: Псевдоэлементы со шрифтом Awesome

Согласно последним тенденциям веб-дизайна, большинство сайтов используют Font Awesome для создания шрифтов иконок, а не изображения. Что увеличивает скорость загрузки сайта.

Пример:

Код HTML:

• Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Код CSS:

ul li::before            { content: "f054"; font-family: FontAwesome;}

Теперь посмотрите на рисунок, приведенный ниже.

Результат:

Метод 2: Псевдоэлементы с фоном

Вы когда-нибудь пробовали задать фоновое изображение для какого-нибудь элемента, используя li active CSS? Если нет, тогда посмотрите приведенный ниже код.

Пример:

Код HTML:

I have the background Image

Код CSS:

h2::after     { width: 100%; height: 23px; content: ""; background: url("../images/separator.png") no-repeat center center; display: block;}

Посмотрите на рисунок, приведенный ниже.

Результат:

Метод 3: Псевдоэлементы с содержимым

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

Пример:

Код HTML:

<p>This is an example of Pseudo </p>

Код CSS:

p::after     { content: "Elements"; display: inline-block;}

Результат:

Метод 4: Псевдоэлементы с незаданным смещением

Что произойдет, если указать относительное смещение для двух блоков? Это даст ужасные результаты. Некоторые браузеры являются достаточно интеллектуальными, чтобы игнорировать такие ошибки. Но многие этого не делают:

Пример c hover active CSS:

Код HTML:

<div class=”container”>
    <div class=”left”>This is an example</div>
    <div class=”right”>This is an example</div>
</div>

Код CSS active:

.container::after,
.container::before        { content: ""; display: block;}
.container::after         { clear: both;}
.left                     { margin-right: 15px; padding: 25px; width: 60%; float: left; background: #2a2a2a; color: #fff; text-align: center; min-height: 95px;}
.right                    { padding: 25px; width: 25%; float: left; background: #2a2a2a; color: #fff; text-align: center;}

Вот окончательный результат после применения явного свойства с использованием псевдоэлементов:

Результат:

Метод 5: Псевдоэлементы с наложением цвета при наведении

Одна из последних тенденций в графическом дизайне - эффекта наложения цвета при наведении. Для этого можно использовать псевдоэлементы:

Пример:

Код HTML:

<ul>
   <li>
      <img alt="Image" src="images/thumb.jpeg">
      <p>Lorem Ipsum</p>
   </li>
   <li>
     <img alt="Image" src="images/thumb.jpeg">
     <p>Lorem Ipsum</p>
   </li>
</ul>

Код li active CSS:

ul li                { width: 49%; padding: 0 5px; display: inline-block; text-align: center; position: relative;}
ul li img            { max-width: 100%; height: auto;}
ul li p              { margin: 0; padding: 20px; background: #ffffff;}
ul li::after         { height: 100%; content: ""; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 5px; right: 5px; opacity: 0;}
ul li:hover::after,
ul li:hover::before  { opacity: 1; cursor: pointer;}
ul li::before        { content: "Hover Text"; position: absolute; top: calc(50% - 12px); left: calc(50% - 40px); color: #ffffff; opacity: 0; z-index: 10;}

Результат:

Теперь вы сможете применить описанные в статье приемы работы с hover active CSS в своих проектах.