Содержание

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

В этой статье я расскажу о псевдоэлементах ::before и ::after и реальных случаях, когда нам потребуется их использовать.

Статья разделена на 4 раздела:

  1. Что такое псевдоэлементы?
  2. ::after
  3. ::before
  4. Общие варианты использования

Дополнительную информацию можно найти на https://betterfullstack.com

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

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

Теперь у нас есть 13 псевдоэлементов:

  • ::after (:after)
  • ::backdrop
  • ::before (:before)
  • ::cue (:cue)
  • ::first-letter (:first-letter)
  • ::first-line (:first-line)
  • ::grammar-error
  • ::marker
  • ::part()
  • ::placeholder
  • ::selection
  • ::slotted()
  • ::spelling-error

В этой статье мы сосредоточимся только на двух элементах ::after и ::before.

::после

::after — это псевдоэлемент, который позволяет вставлять контент на страницу из CSS (без необходимости в HTML).

Определение Mozilla

::after создает псевдоэлемент, который является последним дочерним элементом выбранного элемента.

Синтаксис:

/* CSS3 syntax */
::after
/* CSS2 syntax */
:after

Пример:

a::after {
  content: "→";
}

::до

::before — это псевдоэлемент, который позволяет вставлять содержимое на страницу из CSS (без необходимости в HTML).

Определение Mozilla

::before создает псевдоэлемент, который является первым дочерним элементом выбранного элемента.

Итак, ::before и ::after похожи, но позиция для вставки содержимого отличается. ::before будет добавлен как первый дочерний элемент к выбранному элементу, а

::after будет добавлен как последний дочерний элемент элемента.

Синтаксис:

/* CSS3 syntax */
::before
/* CSS2 syntax */
:before

Пример:

a::before {
  content: "♥";
}

Общие варианты использования

Вот несколько распространенных случаев, когда мы применяем ::before и ::after для вставки содержимого в элементы.

Треугольник

Мы можем использовать псевдоэлементы для создания треугольной формы, которая будет использоваться для создания всплывающей подсказки или какого-либо специального пользовательского интерфейса из дизайна.

Демонстрация:

Код CSS:

В этом примере я создаю треугольник слева, используя псевдоэлемент ::before. Вы можете получить образец CSS от Chris Coyier для создания треугольника с других сторон.

Панировочные сухари

Я думаю, что этот термин встречается во всех системах, таких как административные сайты, CMS, любое веб-приложение, используемое для управления данными.

Демонстрация:

Код CSS:

В приведенном выше примере кода я добавляю / после каждого тега привязки. Для первого якоря я добавлю символ >>. Затем последний удаляет /.

Цитирование

Для вставки кавычек мы используем как ::before, так и ::after. Это будет широко применяться в системах управления контентом или сайтах контента.

Демонстрация:

Код CSS:

Иконки

Очень популярно использовать псевдоэлемент ::before для добавления значка.

Демонстрация из Bootstrap 3 Glyphicons:

Если вы используете fontawesome или любые другие пакеты шрифтов, то вы увидите похожий код, который они применяют :before для добавления значка к элементу.

Как можно выполнить настройку из собственного векторного SVG (масштабируемой векторной графики) или файлов изображений?

Используйте этот базовый шаблон, а затем добавьте свой собственный код.

Я думаю, что есть несколько способов настроить свой собственный значок. Но это базовый, который я использовал много раз с тех пор, как начал работать с Zeplin, который позволяет мне загружать иконки в SVG или других форматах.

Всплывающие подсказки

В этом примере ::after используется для создания всплывающих подсказок. Никакого JavaScript не требуется!

Демонстрация:

Код CSS:

В этом коде используются 2 метода: data- * и attr ().

Флажок Да / Нет

Этот образец я получил от w3school. Затем я использую::after, чтобы добавить контент в флажок, чтобы отобразить ДА или НЕТ.

Демонстрация:

Код CSS:

Очистить поплавок

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

В этом случае мы будем использовать ::before.

Демонстрация:

Код CSS:

Резюме

::before и ::after дают нам много преимуществ при добавлении содержимого в HTML без каких-либо новых узлов DOM. Если вы будете использовать его правильно, ваша жизнь станет намного проще.

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

Надеюсь, эта статья оказалась для вас полезной! Вы можете следить за мной на Medium. Я тоже в Твиттере. Не стесняйтесь оставлять любые вопросы в комментариях ниже. Буду рад помочь!

Проверьте исходный код здесь:



angular-76bqce — StackBlitz
Стартовый проект для приложений Angular, который экспортируется в интерфейс командной строки Angular stackblitz.com



Ресурсы / Ссылки

[1]: Псевдоэлементы https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

[2]: После псевдоэлемента https://developer.mozilla.org/en-US/docs/Web/CSS/::after

[3]: До псевдоэлемента https://developer.mozilla.org/en-US/docs/Web/CSS/::before

[4]: треугольник CSS https://css-tricks.com/snippets/css/css-triangle/



Learn CSS — Лучшие учебники по CSS (2019) | gitconnected
43 лучших руководства по CSS — изучайте CSS бесплатно. Курсы отправляются разработчиками и голосуются за них, что позволяет вам найти… gitconnected.com



Истории — лучше FullStack
Все истории Истории Напишите нам Руководство по отправке истории в блог Better Programming 1. Руководство по истории Чего следует избегать… betterfullstack.com



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

Содержание

  • 1 Синтаксис и поддержка браузерами
    • 1.1 Пример использования псевдоэлементов
  • 2 Использование
    • 2.1 Стилизация псевдоэлементов
    • 2.2 Использование вместе с псевдоклассами
    • 2.3 Добавление transition-эффекта
  • 3 Немного вдохновения
    • 3.1 Fascinating Shadows
    • 3.2 3D Button
    • 3.3 Stacked Image Effect

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

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

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

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

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

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

 

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

 

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

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

Использовать псевдоэлементы крайне просто: :before

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

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

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

 

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

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

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-элементы, поэтому при указании высоты или ширины необходимо установить

display: block:

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;  
}

 

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

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-эффект кавычкам:

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.

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

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

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

Fascinating Shadows

3D Button

Stacked Image Effect

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

Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

КАТЕГОРИИ:

Археология
Биология
Генетика
География
Информатика
История
Логика
Маркетинг
Математика
Менеджмент
Механика
Педагогика
Религия
Социология
Технологии
Физика
Философия
Финансы

Химия
Экология

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву



Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы.

Определение реакций опор и моментов защемления

⇐ ПредыдущаяСтр 5 из 7Следующая ⇒

Псевдоэлемент ::before добавляет определённое содержимое перед каждым указанным элементом.

Псевдоэлемент ::before используется вместе со свойством content, которое необходимо для вставки сгенерированного контента.

 

Пример, в котором перед каждым блоком с изображением и перед каждым абзацем будет генерироваться (добавляться) определенная фраза. В примере указали фиксированную ширину для всех изображений (ширина и высота 100 пикселей). Выбрали все элементы <div> с классом
omg и добавили перед ними определенную фразу. Перед абзацами (элементы <p>) также добавляется определенная фраза. к таким элементам как <input> и <img> напрямую псевдоэлемент ::before применить нельзя. Один из выходов из этой ситуации – заключить элемент в блочный элемент <div>. 		… … …

 

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

 

Задание для самостоятельного выполнения.

Для предыдущего примера измените код таким образом, чтобы после каждого блока с изображением и после каждого абзаца будет генерироваться (добавляться) определенная фраза.


 

 

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

Псевдо-классы

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

В настоящее время в CSS 3 существует более тридцати псевдоклассов.

 

Псевдоклассы в отличие от псевдоэлементов добавляются к селекторам с одним двоеточием:

селектор:псевдокласс { /* одинарное двоеточие */ CSS свойство: значение;}

 

Фокус на элементе

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

 

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

В данном примере мы создали два элемента <input>, первый с типом text (однострочное текстовое поле), а второй с типом password (поле с паролем).

Если пользователь производит выбор элементов <input> (поле получает фокус), то поле получает стиль, который мы задали, а если поле теряет фокус, то стиль возвращается на первоначальный.

 

 

Стилизация ссылок

Псевдокласс :link задаёт стиль всем ссылкам, по которым пользователь не произвёл переход (не посещенные ссылки). Как правило, используется с псевдоклассом :visited, который определяет стиль для посещённых пользователем ссылок.

 

В этом примере с использованием псевдокласса :link мы указали, что ссылки (элементы <a>) по которым пользователь не переходил подсвечиваются оранжевым цветом. … a:link { background-color: orange; } … <p>Не посещённые ссылки:</p> <a href = «https://ru.wikipedia.org/wiki/ Квантовая _ механика » >Квантовая_механика</a> <a href = «https://ru.wikipedia.org/wiki/ Начертательная _ геометрия » >Начертательная_геометрия</a> …

 

Псевдокласс :visited задаёт стиль всем ссылкам, по которым пользователь производил переход (посещенные ссылки).

 

В этом примере с использованием псевдокласса :visited мы указали, что ссылки (элементы <a>) по которым пользователь производил переход имеют красный цвет. … a:visited { color: orange; } … <p>Cсылки, которые Вы уже посещали:</p> <a href = «https://ru.wikipedia.org/wiki/Квантовая_механика» > Квантовая_механика</a> <a href = «https://ru.wikipedia.org/wiki/Начертательная_геометрия» > Начертательная_геометрия</a> …

Псевдокласс :active используется для выбора активного элемента — элемента на который в данный момент пользователь кликнул мышкой. Стиль для элемента применится и будет работать пока удерживается кнопка мыши.

 

 

Псевдокласс :hover используется для стилизации любого элемента, на который в данный момент указывает курсор мыши. Чаще всего используют данный псевдокласс с ссылками, кнопками, в меню навигации и таблицами.

 

В этом примере с использованием псевдокласса :hover мы подсвечиваем строку на которую в настоящее время наведен курсор. Если вы используете псевдоклассы :link и :visited, то псевдокласс :hover должен быть расположен после них. … … …

Задание для самостоятельного выполнения

 

Составьте HTML страницу на которой:

1. Ссылки по умолчанию имеют цвет текста черный.

2. При наведении на ссылку цвет текста ссылки должен соответствовать её названию (red, green или blue).

3. При выделении текста ссылки цвет заднего фона должен соответствовать её названию.

4. Цвет первой буквы каждого абзаца должен соответствовать определенному цвету.

5. При выделении текста абзаца цвет заднего фона должен соответствовать цвету первой буквы.

6. Пока на абзаце удерживается кнопка мыши цвет текста должен соответствовать тематике абзаца (red, green или blue).

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

8. Продвинутое задание: оптимизируйте (сократите) css код, образуя групповые селекторы, отвечающие за один и тот же цвет при том, или ином состоянии элемента, где это возможно.

 

 

Селекторы атрибутов

Исходя из названия заголовка, вы можете догадаться, что благодаря использованию селекторов атрибутов вы можете выбрать те элементы страницы, которые имеют определённые HTML атрибуты.

Давайте рассмотрим следующий селектор и попробуем разобраться, что он значит:

img[title] { /* выбирает все элементы <img> с атрибутом title */ блок объявлений;}

img в данной случае аналогичен селектору типа, т.е выбирает все элементы <img>, а в квадратных скобках мы задаем имя атрибута этого элемента. То есть происходит выборка всех элементов данного типа с определённым атрибутом, в нашем примере это глобальный атрибут title, определяющий текстовую подсказку о содержимом элемента.

Вы можете использовать селекторы атрибутов не только напрямую к элементам, но и использовать их с прочими селекторами, например с селекторами класса или id селекторами:

.main[title] { /* выбирает все элементы с классом main и атрибутом title */ блок объявлений;} #main[title] { /* выбирает элемент с идентификатором main и атрибутом title */ блок объявлений;}

В данном случае первый селектор выбирает все элементы, которые имеют значение глобального атрибута class равным main и глобальным атрибутом title. Второй селектор выбирает элемент, который имеют значение глобального атрибута id равным main и глобальным атрибутом title.

 

Пример в котором, мы выберем все элементы <img>, у которых присутствует атрибут alt, который задает альтернативный текст для изображения. … … …

 

С помощью селектора атрибутов можно выбрать элементы не только с определённым атрибутом, но и указать с каким значением должен быть этот атрибут. = value] {

блок объявлений;

}

 

  Значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как начало гиперссылки.   Пример в котором выберем на странице все абсолютные адреса внешних гиперссылок, которые начинаются с http://, либо https:// … … Код тела документа допишите самостоятельно …

 

пример в котором мы выберем гиперссылки, которые заканчиваются определённым разрешением файла … … Код тела документа допишите самостоятельно …

 

Следующий селектор позволит нам, к примеру, выбрать изображения, которые содержат в названии IMG_ (как правило такое наименование файлов использует компания Canon):

img [src*=»IMG_»] { /* выбирает все элементы img, атрибут src, которых содержит символы «IMG_» */

блок объявлений;

} 

/* селектор выбирает элементы с такими значениями как «xxxIMG_», «IMG_xxxx» и «xxxIMG_xxxx» */

Браузер интерпретирует это как необходимость выбора всех изображений, атрибут src которых содержит IMG_ (в любом месте). Зачастую такой способ позволяет быстрее отформатировать необходимые элементы, по сравнению с созданием и присвоением стилевого класса для каждого элемента.

Следующий селектор позволяет выбрать элемент, значение атрибута которого содержит определённое слово (не зависимо от позиции):

p[title ~=»home»] { /* выбирает элементы <p>, которые содержат определенное слово */

блок объявлений;

} 

 

<p title = «go home»>Абзац title=»go home»</p> <!— абзац будет стилизован (содержит home) —>

<p title = «home home» >Абзац title=»home home»</p> <!— абзац будет стилизован (содержит home) —>

<p title = «home-1» >Абзац title=»home1″</p> <!— абзац не будет стилизован —>

<p title = «homes» >Абзац title=»homes»</p> <!— абзац не будет стилизован —>

<p title = «shome»>Абзац title=»shome»</p> <!— абзац не будет стилизован —>

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

[title | = home] { /* выбирает все элементы с атрибутом, значение которого начинается с определённого слова (после него не должно быть никаких символов, либо допускается продолжать значение через дефис, иначе выборка не будет произведена) */

блок объявлений;

} 

 

<p title = «home»>Абзац title=»home»</p> <!— абзац будет стилизован (начинается с home) —>

<p title = «home-1» >Абзац title=»home-1″</p> <!— абзац будет стилизован (начинается с home после которого следует дефис) —>

<p title = «home home»>Абзац title=»home home»</p> <!— абзац не будет стилизован —>

<p title = «not home»>Абзац title=»not home»</p> <!— абзац не будет стилизован —>

<p title = «homes» >Абзац title=»homes»</p> <!— абзац не будет стилизован —>

<p title = «shome»>Абзац title=»shome»</p> <!— абзац не будет стилизован —>

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

 

⇐ Предыдущая1234567Следующая ⇒



Читайте также:



Психологические особенности спортивного соревнования

Приготовление дезинфицирующих растворов различной концентрации

Занятость населения и рынок труда

Социальный статус семьи и её типология



Последнее изменение этой страницы: 2021-05-27; просмотров: 87; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь — 176.9.44.166 (0.014 с.)

Псевдоэлементы :Before и :After – как и где использовать

Здравствуйте, уважаемые друзья. Как вы знаете, на скорость загрузки сайта влияет довольно много факторов. А ещё скорость загрузки сайта – это один из факторов ранжирования в поисковых системах.

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

Разумеется, перед загрузкой изображений на сайт их нужно оптимизировать, как и какими средствами, я писал здесь. Также положительно на скорости загрузки скажется объединение элементов дизайна в CSS-спрайты. Этот способ сократит в разы количество запросов к базе данных, и на выходе вы получаете более шустрый сайт.

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

Если хотите узнать всё и сразу – смотрите видеоурок.

Содержание

  1. Что такое псевдоэлементы :Before и :After
  2. Что можно упаковать в псевдоэлементы :Before и :After
  3. Как использовать псевдоэлементы :Before и :After
  4. Псевдоэлементы :Before и :After с фоновым изображением
  5. Псевдоэлементы :Before и :After со шрифтами иконками

Что такое псевдоэлементы :Before и :After

Псевдоэлементы Before и After используются для добавления стилей или контента до и после элемента, к которому они применены. Причём эти псевдоэлементы не отображаются в исходном коде страницы.

Я увидел в них своего рода альтернативу css-спрайтам. На моей нынешней теме оформления я собрал элементы дизайна в спрайты. Это сократило время загрузки сайта.

Реализация css спрайтов

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

Что можно упаковать в псевдоэлементы :Before и :After

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

Есть лишь некоторые отличия в наполнении псевдоэлементов контентом. Скажем, если это просто кавычки или скобка, или какой другой простой символ, то проблем нет вообще. Но, вот если это шрифт-иконки или фоновое изображение, то придётся немного повозиться. И эта возня того стоит.

Кстати, если в качестве контента для псевдоэлементов использовать специальные символы или шрифты-иконки, то к ним можно применять стили css: цвет, размер, начертание, позиционирование и так далее.

Как использовать псевдоэлементы :Before и :After

Конструкция использования псевдоэлементов достаточно проста. :Before устанавливается перед элементом, а :After после элемента.

В HTML код вставляем такую конструкцию:

<span class=”psevdo”>Здесь может быть любой текст.</span>

Разумеется, это пример и в каждом конкретном случае эту конструкцию можно всегда изменить под себя. Класс «psevdo» будет использоваться для добавления псевдоэлементов в стилях CSS. И делается это через свойство css (content).

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

. psevdo:before { content: '§'; }
. psevdo:after { content: '§'; }

А для придания псевдоэлементам необходимого вида, можно добавить дополнительные стили. Всё будет зависеть от конкретного примера.

И получится так:

§Здесь может быть любой текст.§

Это был простой пример. Теперь давайте рассмотрим пример с добавлением псевдоэлементов с фоновым изображением.

Псевдоэлементы :Before и :After с фоновым изображением

Принцип добавления псевдоэлементов с фоновым изображение похож на предыдущий пример, но только в качестве контента будет использоваться изображение. Можно использовать как отдельные изображения (иконки), так и спрайты.

В качестве примера я приготовил небольшой спрайт.

Пример css спрайта

А теперь давайте разберём, как добавить псевдоэлементы с изображением.

Код html будет тот же.

<span class=”psevdo”>Здесь может быть любой текст.</span>

А вот css стили будут отличаться. Отличие в том, что свойство content будет пустым. Значение будет подставляться из свойства background.

.psevdo:before{
content: ""; /*поле контент оставляем пустым*/
float: left; /*обтекание по левому краю*/
position: relative; /*позиционирование*/
top: 4px; /*отступ сверху*/
left: 4px; /*отступ слева*/
background: url(glyphicons.png) -3px -3px no-repeat; /*фоновое изображение, позиция, не размножать*/
display: block; /*блочный элемент*/
height: 25px; /*высота*/
width: 25px; /*ширина*/
}
. psevdo:after{
content: "";
position: absolute;
top: 8px;
left: 188px;
background: url(glyphicons.png) -25px 10px no-repeat;
display: block;
height: 25px;
width: 25px;
}

В результате применения этих стилей – я получил вот такой эффект.

Готовый пример

Естественно, в каждом конкретном примере свойства css будут отличаться.

А теперь рассмотрим вариант, когда в качестве контента будут иконки специальных шрифтов. Этот вариант мне нравится больше всего.

Псевдоэлементы :Before и :After со шрифтами иконками

Реализация этого метода ещё проще, чем предыдущие два. Да и к тому же при использовании этого метода в вашем арсенале будет более 500 иконок. Которые вы сможете масштабировать, изменять цвет и так далее, как этого будет требовать ваш проект.

Я пересмотрел несколько шрифтов-конок и остановился на Awesome. На мой взгляд, здесь собраны более красивые иконки и их большой выбор.

Со всеми иконками вы можете ознакомиться на официальном сайте Awesome. Там же вы найдёте и множество примеров по применению псевдоэлементов.

Итак, для того чтобы использовать псевдоэлементы :Before и :After с контентом в виде шрифтов-иконок. Необходимо организовать подключение к базе этих самых иконок.

Шаг 1.

Подключаем базу шрифтов. Для этого в заголовок сайта (файл header.php) необходимо вставить вот такой код:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Для этого открываем административную панель WP – «Внешний вид» — «Редактор» — «Заголовок/header.php»

Подключаем шриф

Шаг 2.

Теперь на сайте Awesome выбираете подходящие иконки и копируете код в исходный код вашего шаблона.

Вставляем иконки

Я в качестве примера добавил псевдоэлементы :Before рядом с уже реализованными спрайтами на моём блоге.

Пример с иконками

Шаг 3.

А для того чтобы пример был более наглядный я добавил пару свойств css в файл style. css:

font-size: 15px;
color: crimson;

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

Друзья, теперь вы понимаете, как можно использовать псевдоэлементы :Before и :After и где их применить. А самое главное эти элементы загружаются намного быстрей, чем множество маленьких изображений.

Пробуйте, внедряйте. А если будут вопросы, пишите в комментариях, — я помогу. До встречи, друзья в новых статьях.

С уважением, Максим Зайцев.

Применение псевдоклассов :before и :after в CSS

Использование псевдоэлементов в CSS значительно расширяет возможности для интеллектуального выбора конкретных элементов на веб-странице и для внесения таких видов изменений, которые в противном случае были бы невозможны. Применение их сочетаний позволяет внести довольно сложные изменения в код страницы. С их помощью можно решать множество проблем, для которых обычно нужны либо JavaScript, либо доступ к PHP-коду сайта.

Псевдоэлементы для стилизации в CSS

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

Их используют для оформления существующих HTML-элементов с дополнительным текстом или изображением содержимого. Псевдоэлементы :after и “content” в CSS, который является его свойством, неразрывно связаны, и первый не работает отдельно от второго. Содержание этого свойства можно оставить пустым, если добавить к нему пустые кавычки: content: “”. Таким образом, еще один вариант использования этого псевдоэлемента — сделать его контейнером для какого-то содержимого. Если содержимое и свойство удаляется полностью, :after не будет работать.

Практическое применение :before и :after в CSS

Наверное, самое популярное использование данных псевдоэлементов — добавление иконок. В этом случае они будут располагаться до или после какого-то текста, например, названия компании. Еще один вариант применения — стилизация заголовков. Но псевдоэлементы можно использовать не только для создания разнообразных украшений на странице. Рассмотрим очень распространенный пример: красную звездочку, которая находится в поле формы, обязательном для заполнения. Один из простых способов это сделать — размещать ее каждый раз непосредственно в HTML-разметке. Но ради этого придется писать очень много разметки для одной красной звездочки. Кроме того, что если мы хотим изменить все эти звездочки в точки или в слова или перекрасить их в другой цвет? В этом случае придется сделать одно и то же изменение в каждом из дубликатов.

Пример работы с формой

Несколько более элегантный способ, чтобы получить тот же результат — использовать псевдоэлемент :after в CSS и объединить его с разметкой HTML. Для этого нужно задать в коде элементу поля какой-то класс, а затем добавить к нему псевдоэлемент и нужное свойство:

. some-field:after {content: " *";color: red;}

Теперь в нужных местах будет стоять красная звездочка. Кроме того, правила для элементов с классом .some-field и псевдоэлементом :after в CSS будут централизованы в одном месте, так что можно будет легко изменить внешний вид страницы, в том числе цвет, размер, содержимое на всем сайте сразу. Из этого примера становится понятно, что подобная логика применяется к другим повторяющимся текстовым украшениям. Например, используя псевдоэлемент :before вместе с некоторыми шрифтами, можно изменять значок неупорядоченного списка на другой.

Вставка содержимого без изменения файлов шаблонов для сайта WordPress

Для сайтов WordPress также можно использовать псевдоэлементы. Например, если нужно добавить уведомление о доставке в заголовке на каждой странице, но установленная тема не позволяет что-то добавить, кроме строки поиска и корзины. Это гораздо проще, чем переделывать шаблон. Добавив псевдоэлемент :after и нужную надпись в свойство “content”, можно расположить ее на удобном месте, где она будет смотреться логично. Главным выводом из этого является то, что использование :before и :after настолько широко, что позволяет по-разному позиционировать элементы, заставляя их находиться справа или слева от контейнера, использовать поля и отступы.

Непрозрачный текст на полупрозрачном фоне

В CSS удивительно сложно сделать элемент с полностью непрозрачным текстом над полупрозрачным изображением. Можно пробовать выставлять непрозрачность, но при этом и сам текст размывается. Самый простой вариант сделать это — правильно использовать псевдоэлемент :before. С его помощью основной слой становится полноразмерным, абсолютно спозиционированный и с полупрозрачным изображением под главным элементом, в котором содержится текст. Этот слой изображения может иметь любую непрозрачность, которая необходима, но при этом не будет влиять на основной слой.

Недостатки использования псевдоклассов

Использование сочетаний нескольких таких элементов является мощным инструментом в руках разработчика, но считается, что его лучше всего применять в качестве последнего средства, когда PHP-код сайта по каким-то причинам не доступен, или его невозможно исправить. Происходит так потому, что с помощью других средств все может быть сделано гораздо проще. Например, можно просто добавить простые классы CSS, где это необходимо. Стоит отметить, что ошибка “connection failed after 4 retries CSS” не относится к каскадной таблице стилей. Она встречается при проблеме с сервером в игре Counter-Strike: Source. То же самое относится к “CSS v34 connection failed after 4 retries”. Здесь под “CSS” имеется в виду название игры.

Конкретные недостатки таких псевдоэлементов как :after в CSS включают:

  1. Хрупкость стилевого оформления. Возможность быстро испортить код при неверном использовании.
  2. Непрозрачность. Большое количество кода с использованием псевдоэлементов может быть непонятным другому верстальщику, который начнет работать с сайтом.
  3. Псевдоэлементы поддерживаются не полностью. Браузеры становятся все лучше и совершеннее, но все же намного безопаснее пользоваться простыми классами HTML.

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

Что такое псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements)