Css картинка before – Можно ли изменить размер картинки, вставленной при помощи ::before или ::after (свойство content)?

Содержание

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

Псевдоэлементы :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

Псевдоэлементы CSS before и after: особенности и примеры использования

Крутое использование псевдоэлементов CSS ::before и ::after

От автора: я должен признаться: мне нравятся псевдо-элементы CSS ::before и ::after. Они похожи на пару приспешников в каком-то модном приключении. В 3 раза больше силы. В 3 раза больше стилей. В 3 раза больше удивительные визуальных эффектов, которые вы можете создать.

Крутое использование псевдоэлементов CSS ::before и ::after

Вы никогда не окажетесь в одиночестве — потому что везде, где был один, теперь будут трое

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

Если вы никогда раньше не сталкивались с ::before и ::after, вы можете спросить: «Что это за псевдо-элемент, о котором вы говорите?»

Вот 30-секундный обзор: Псевдоэлементы являются «воображаемыми» элементами, которые можно вставить в документ с помощью CSS. Например, если бы я написал очень простой CSS:

Крутое использование псевдоэлементов CSS ::before и ::after

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

p::before { content: "Hello!"; }

p::before {

  content: "Hello!";

}

Внезапно перед каждым p контента страницы будет вставлено слово «Hello». Псевдо-элемент ::after похож на него, но размещается после контента.

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

Тем не менее, я хочу выделить одну распространенную ошибку, потому что я так много раз ее совершал. Многие из применений, которые мы будем исследовать, включают в себя графику, но не содержат реального содержимого из слов. Это замечательно, но вы должны установить и свойство content, и, если ваш контент пуст, свойство display — или псевдо-элемент не будет отображаться. Я наступал на эти грабли много раз… поэтому никогда не забывайте начинать с настройки контента. Если ваше использование полностью визуально, просто установите:

content: ""; display: inline-block;

content: "";

display: inline-block;

Простое использование ::before и ::after

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

Пользовательские иконки

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

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

Например, если бы я хотел, чтобы каждый элемент на странице с классом .kball отображал круг размером 30×30 с изображением моего профиля, я мог бы сделать что-то вроде этого:

Цитаты

Еще одно полезное использование ::before и ::after заключается в добавлении кавычек вокруг цитаты. Например, мы могли бы создать класс «quote», который применяет двойные кавычки до и после, и даже класс атрибуции, который добавляет в начале тире:

Крутое использование псевдоэлементов CSS ::before и ::after

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Продвинутое использование before и after

Создание фигур

Одной из проблем работы в HTML и CSS является ограниченное количество «базовых» фигур, с которыми вам приходится работать.

По сути, каждый элемент является прямоугольником … и затем с помощью продвинутого использования border-radius и border вы можете либо округлить этот прямоугольник в овал или круг, либо наклонить углы и создать из него треугольник. Конечно, вы можете повернуть его, но это и все…

Но теперь с ::before и ::after у вас есть в 3 раза больше «блоков» для экспериментов. Каждый из них может быть отдельно преобразован, расположен и повернут. Это приводит к феноменальному выбору фигур, которые вы можете создать с помощью чистого CSS.

Крис Койер из CSS Tricks собрал здесь большую коллекцию возможных фигур, из которых я воспроизвел свои любимые, используя цветовую схему ZenDev.com. Верите или нет, это всего лишь 1 элемент HTML!

Отображение значений атрибутов

Еще одно очень крутое использование псевдо-элементов ::before или ::after — это отображение содержимого атрибута.
Вы можете сделать это, включив в content — attr([attributename]).

Например, если вы используете виджет на основе JavaScript, который хранит какое-то значение в качестве атрибута, вы можете автоматически отобразить этот атрибут без необходимости использовать какой-либо JavaScript для его просмотра!

Одно из мест, где я использовал это раньше — это слайдер ZURB Foundation. Слайдер работает, изменяя значение в скрытом поле ввода… но что, если мы хотим сделать текущее значение видимым в самом слайдере? Элемент управления, которым мы манипулируем — это просто span… но он получает атрибут aria для текущего значения aria-valuenow. Ссылаясь на него в псевдо-элементе с помощью content: attr(aria-valuenow), мы можем отобразить его прямо на элементе управления.

Многоступенчатая анимация

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

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

Завершение

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

Источник: https://zendev.com

Редакция: Команда webformyself.

Крутое использование псевдоэлементов CSS ::before и ::after

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Крутое использование псевдоэлементов CSS ::before и ::after

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Псевдоэлемент ::before | CSS | WebReference

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

По умолчанию ::before создаёт строчный элемент.

Синтаксис ?

Селектор::before { content: "текст" }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>before</title>
  <style>
   li::before {
     content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ 
   }
   li {
     list-style: none; /* Убираем исходные маркеры */ 
   }
  </style>
 </head>
 <body>
   <ul>
     <li>Альфа</li>
     <li>Бета</li>
     <li>Гамма</li>
   </ul>
 </body>
</html>

В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента ::before выводится символ ¶. Результат примера продемонстрирован на рис. 1.

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

Рис. 1. Использование псевдоэлемента ::before в списках

Примечание

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры ?

:before8121441
::before9125741.5
 
:before1141
::before1171

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Псевдоэлемент :before | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 4.0+ 9.2 1.0+ 1.0+ 3.5+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Для :before характерны следующие особенности.

  • При добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.
  • При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
  • :before наследует стиль от элемента, к которому он добавляется.

Синтаксис

элемент:before { content: "текст" }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>before</title>
  <style>
   li:before {
     content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ 
   }
   li {
     list-style: none; /* Убираем исходные маркеры */ 
   }
  </style>
 </head>
 <body>
   <ul>
     <li>Альфа</li>
     <li>Бета</li>
     <li>Гамма</li>
   </ul>
 </body>
</html>

В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента :before выводится символ ¶. Результат примера продемонстрирован на рис. 1.

Рис. 1. Использование псевдоэлемента :before в списках

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre>.

Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :before к тегу <fieldset>.

Firefox до версии 3.5 не допускает применение к :before свойств position, float, list-style-type и некоторых значений display.

Как работать c before и after в CSS?

Здравствуйте, дорогие друзья!

Сегодня разберём как добавить псевдоэлемнты before и after в CSS. У вас когда-нибудь возникала необходимость добавить дополнительный элемент на сайте, но вы без понятия где искать фрагмент кода, в котором нужно дописать HTML код чтобы этот элемент появился? Думаю что да и не раз, а если не возникала, то обязательно возникнет.

Навигация по статье:

В такой ситуации на выручку приходят псевдоэлементы before и after, благодаря которым, мы можем при помощи CSS добавлять на сайт элементы вёрстки. Конечно, сложный блок или таблицу вы таким образом не добавите, а вот какой то заголовок, надпись, знак, иконку или блок с изображением – это пожалуйста!

Как работать с псевдоэлементом before в CSS?

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

  1. 1.Определяем класс или идентификатор элемента, перед которым мы хотим добавить свой блок. Как это делать показано в этой статье.
  2. 2.Подключаемся к сайту через FTP или заходим в файловый менеджер на хостинге.
  3. 3.Открываем CSS файл, в котором прописаны стили сайта. Для сайтов на CMS этот файл находится в папке с активным шаблоном и может называться style.css, stylesheet.css, main.css в зависимости от CMS.
  4. 4.В самом конце этого файла пишем код:

    .entry-meta::before { content:'Привет!'; }

    .entry-meta::before {

    content:'Привет!';

    }

    Вместо .entry-meta указываете класс или идентификатор своего элемента.
    Внутри css свойства content в кавычках вы можете указать свой текст или какой-то символ.

  5. 5.Так же мы можем задать для нашего псевдоэлемента следующие CSS свойства:

    height:20px; /*высота псевдоэлемента*/ color:#fff; /*цвет текста*/ background:#2F73B6; /*цвет фона псевдоэлемента*/ border:1px solid #000; /*рамка*/ font-size:16px; /*размер шрифта*/ padding:10px; /*внутренний отступ псевдоэлемента*/ display:block;/*превращаем в блочный элемент*/ text-align:left;/*выравнивание текста*/ и другие CSS свойства. width:100%; /*ширина псевдоэлемента*/

    height:20px; /*высота псевдоэлемента*/

    color:#fff; /*цвет текста*/

    background:#2F73B6; /*цвет фона псевдоэлемента*/

    border:1px solid #000; /*рамка*/

    font-size:16px; /*размер шрифта*/

    padding:10px; /*внутренний отступ псевдоэлемента*/

    display:block;/*превращаем в блочный элемент*/

    text-align:left;/*выравнивание текста*/ и другие CSS свойства.

    width:100%; /*ширина псевдоэлемента*/

    Псевдоэлементы CSS
  6. 6.Сохраняем изменения в файле и смотрим что получилось. CSS псевдоэлементы

Обратите внимание, как отображается наш псевдоэлемент before в HTML коде. Он не является самостоятельным тегом и привязан к элементу класс которого мы указали в CSS файле.

Как работать с псевдоэлементом after в CSS?

Псевдоэлемент after позволяет добавить произвольный контент в конце указанного элемента.

Алгоритм работы с ним абсолютно такой же как и с before. Разница заключается лишь в том, что он будет добавлять блок не перед, а в конце элемента класс или идентификатор которого вы укажете в CSS файле.

Например, добавим изображение после блока с идентификатором #content

Полноценную картинку через тег <img> мы таким образом не вставим, поэтому будем задавать её через фон.

  1. 1.Подготавливаем изображение нужного размера и загружаем его на хостинг в папку с картинками вашего шаблона. Загрузка изображения на хостинг

    Я для этой цели использую FTP клиент FileZilla. Как с ним работать я рассказывала в этой статье.

  2. 2.Теперь в самом конце CSS файла пишем код:

    #content::after { content:''; display: block; /*делаем элемент блочный*/ height:100px; /*задаём высоту*/ background: url(images/bottom-image1.png) no-repeat; /*указываем загруженную картинку в качестве фона псевдоэлемента*/ }

    #content::after {

    content:'';

    display: block; /*делаем элемент блочный*/

    height:100px; /*задаём высоту*/

    background: url(images/bottom-image1.png) no-repeat; /*указываем загруженную картинку в качестве фона псевдоэлемента*/

    }

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

Вывод блока псевдоэлементом

Особенности псевдоэлементов before и after

  1. 1.Псевдоэлементы должны указываться сразу после селектора через двойное двоеточие без пробела, как показано в примерах выше. Однако допускается и использование одинарного двоеточия.
  2. 2.Псевдоэлемет является строчным элементом, поэтому если в CSS свойстве content ничего не указано то его ширина по умолчанию будет равна нулю. Так же для строчных элементов не применяется вертикальные отступы margin. Чтобы они начали работать и элемент стал на всю ширину ему нужно дописать CSS свойство display:block;
  3. 3.Вы можете использовать только один псевдоэлемент на селектор. То есть нельзя использовать сразу 2 псевдоэлемента для одного блока.
    Запись .block-class::before::after или #content::first-line::after будет неправильной.
  4. 4.Кроме псевдоэлементов ::before и ::after существуют и другие, такие как ::selection, ::first-line, ::first-letter, о которых я расскажу в одной из следующих статей.

Надеюсь что помогла вам разобраться с before и after если у вас возникнут вопросы или вам есть что сказать – оставляйте комментарии!

Спасибо что посетили мой сайт!

С уважением Юлия Гусарь

CSS-трюк с background-image — Aimweb.name

Довольно интересное применение псевдо-элемента :before показал Nicolas Gallagher в своем блоге. Плюс в том, что мы избавляемся от лишних презентационных элементов в теле документа и выносим их в CSS.
В коде это выглядит так:

#content {
  position:relative;
  z-index:1;
  background:#4B92C0;
}
#content:before {
   content:""; /*вместо того, чтобы создавать div с фоном и позиционировать внутри родительского блока*/
   position:absolute;
   z-index:-1;
   bottom:10px;
   right:10px;
   width:500px;
   height:300px;
   background:url(image.jpg);
}

А в теле документа при этом никаких дополнительных элементов:

Пример по ссылке.
(поддерживается браузерами: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+)

Псевдо-фон из спрайта

Также показан интересный прием при работе со спрайтами: фоновое изображение подрезается по размерам псевдо-элемента.

.someclass a:before {
   content:"";
   float:left;
   width: 24px; /*эти размеры определяют область, которая будет «вырезана» из спрайта*/
   height: 24px;
   margin:0 5px 0 0;
   background:url(sprite.png);
}
.class1 a:before {background-position:0 -24px;}
.class2 a:before {background-position:0 -48px;}
.class3 a:before {background-position:0 -72px;}
.class4 a:before {background-position:0 -96px;}

В теле документа это выглядит таким образом:

<ul>
   <li><a href="#">Ссылка раз</a></li>
   <li><a href="#">Ссылка два</a></li>
   <li><a href="#">Ссылка три</a></li>
   <li><a href="#">И у каждой свой фон</a></li>
</ul>

Пример в новом окне.

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

::after создаёт псевдоэлемент после содержимого элемента. Этот псевдоэлемент работает только совместно со стилевым свойством content, которое определяет содержимое для вставки. Не у всех элементов есть собственное содержимое, поэтому ::after не даёт результата для <img>, <input> и ряда других элементов.

В примере 1 показано использование псевдоэлемента ::after для добавления текста в конце абзаца.

Пример 1. Применение ::after

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>::after</title>
  <style>
   .new::after {
    content: " - Новьё!"; /* Добавляем после текста абзаца */
    color: red; /* Красный цвет текста */
    font-style: italic; /* Курсивное начертание */
   }
  </style>
 </head>
 <body>
  <p>Ловля льва в пустыне с помощью метода золотого сечения.</p>
  <p>Метод ловли льва простым перебором.</p>
 </body>
</html>

Результат примера показан на рис. 1.

Добавление текста к абзацу с помощью ::after

Рис. 1. Добавление текста к абзацу с помощью ::after

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

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

Пример 2. Использование ::before

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>::before</title>
  <style>
   ul {
    list-style: none; /* Прячем маркеры списка */
   }
   li::before {
    content: "✿"; /* Добавляем символ */
    padding-right: 7px; /* Расстояние от текста до маркеров */
    color: red; /* Красный цвет маркеров */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
   <li>Крыса Лариса</li>
  </ul>
 </body>
</html>

Результат данного примера показан на рис. 2.

Изменение вида маркеров с помощью ::before

Рис. 2. Изменение вида маркеров с помощью ::before

В данном примере псевдоэлемент ::before устанавливается для селектора li и определяет маркеры списка. Добавление желаемых символов происходит путём задания значения свойства content.

Блок с цитатой

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

Вид цитаты с кавычками

Рис. 3. Вид цитаты с кавычками

Для отображения кавычки перед текстом мы используем ::before, а после текста — ::after. К ним же добавляем и желаемое оформление кавычек, вроде изменения цвета и размера (пример 3).

Пример 3. Кавычки в цитате

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цитата</title>
  <style>
   blockquote {
    background: #f9f0de; /* Цвет фона */
    border-left: 2px solid #0083ca; /* Линия слева */
    padding: 1em; /* Поля вокруг текста */
   }
   blockquote::before,
   blockquote::after {
    content: "“"; /* Левая кавычка */
    font-size: 40px; /* Размер текста кавычек */
    color: #c1172c; /* Цвет кавычек */
    line-height: 0; /* Текст не занимает место */
   }
   blockquote::after {
    content: "”"; /* Правая кавычка */
   }
  </style>
 </head>
 <body>
  <blockquote>Чаще всего выход там, где был вход.</blockquote>
 </body>
</html>

Хлебные крошки

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

Хлебные крошки

Рис. 4. Хлебные крошки

Для создания такой навигации обычно применяется список <ul>, а внутри пунктов <li> вставляются ссылки на соответствующие разделы сайта. Чтобы отделить ссылки друг от друга, между ними вставляется разделитель, в качестве него обычно используется косая черта, но можно использовать стрелку и другие символы.

Разделитель добавляем через свойство content и селектор li + li::before, он выберет все элементы <li> кроме первого (пример 4).

Пример 4. Хлебные крошки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Хлебные крошки</title>
  <style>
   .breadcrumbs {
    margin: 0; /* Убираем отступы */
    padding: 10px; /* Поля вокруг текста */
    background: #b2d235; /* Цвет фона */
   }
   .breadcrumbs li {
    display: inline-block; /* Размещаем список по горизонтали */
   } 
   .breadcrumbs a { 
    color: #fff; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание у ссылок */
   }
   .breadcrumbs li + li::before {
    content: '/'; /* Разделитель ссылок */
    padding: 0 7px; /* Расстояние вокруг разделителя */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><a href="#">Главная</a></li>
   <li><a href="#">Картинки</a></li>
   <li><a href="#">Девушки</a></li>
  </ul>
 </body>
</html>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 17.02.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Отправить ответ

avatar
  Подписаться  
Уведомление о