7 практических применений псевдоэлементов :: before и :: after в CSS

Теперь у нас есть отличный заполнитель, совместимый с Chrome и Firefox.

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

Цитаты — это цитаты или отрывки из цитируемой работы. Они также предоставляют действительно прекрасную возможность разбить стену текста чем-то визуально интересным.

Есть много способов стилизовать цитаты. У Криса есть пять стилей, которые восходят к 2007 году.

Я хочу взглянуть на другую технику, которая включает :: before и :: after . Как мы видели в последнем примере, мы можем использовать свойство content для отображения сгенерированного содержимого и применять другие свойства для его украшения. Давайте поставим большие кавычки в начале и в конце цитаты.

HTML прост:

Несколько косметических элементов в CSS:

  blockquote {
  стиль шрифта: курсив;
  высота строки: 1,618;
  размер шрифта: 1.2em;
  ширина: 30em;
  положение: относительное;
  отступ: 40 пикселей 80 пикселей;
}  

Обратите внимание на положение : relative там, потому что, как вы узнаете, это важно для размещения цитат.

Как вы, наверное, догадались, мы будем использовать :: before для первой кавычки и :: после для заключительной. Теперь мы могли бы просто вызвать свойство content на обоих и создать там метки. Но CSS предлагает нам значения открытой цитаты и закрытой цитаты .

  blockquote :: before {
  содержание: открытая цитата;
  / * Поместите его вверху слева * /
  верх: 0;
  слева: 0;
}

blockquote :: after {
  содержание: закрытая цитата;
  / * Поместите его в правом нижнем углу * /
  внизу: 0;
  справа: 0;
}  

Это дает нам желаемые кавычки, но позвольте мне немного увеличить стили:

  blockquote :: before,
blockquote :: after {
  цвет фона: #cccccc;
  дисплей: блок;
  ширина: 60 ​​пикселей;
  высота: 60 ​​пикселей;
  высота строки: 1,618;
  размер шрифта: 3em;
  радиус границы: 100%;
  выравнивание текста: центр;
  позиция: абсолютная;
}  

Значок Маркированный список

Мы упорядочили (

) и неупорядоченные (
) списки в HTML. Оба имеют стиль по умолчанию, продиктованный таблицей стилей пользовательского агента браузера. Но с псевдоэлементом :: before мы можем заменить эти «стандартные» стили чем-то своим. И угадай что? Мы можем использовать смайлики (😊) в свойстве content !

  .name-list li :: before {
  содержание: «😊»;
  маржа справа: 15 пикселей;
  размер шрифта: 20 пикселей;
}  

Хотя это замечательно и все такое, стоит отметить, что мы действительно могли использовать псевдоэлемент :: marker который разработан специально для стилизации маркеров списка. Эрик Мейер показывает нам, как это работает, и, вероятно, это лучший способ в долгосрочной перспективе.

Анимированный тумблер

Один из самых изящных приемов стилизации форм — это создание переключателя из стандартного флажка HTML. Фактически, Прити Сэм недавно поделилась одним подходом к этому, продемонстрировав несколько других приемов стилизации флажков с использованием масок CSS.

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

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

:

  .container {
  фон: # 212221;
  фон: linear-gradient (справа, # 1560bd, # e90);
  радиус границы: 50 пикселей;
  высота: 40 пикселей;
  положение: относительное;
  ширина: 75 пикселей;
}  



Мы собираемся «скрыть »Установленный по умолчанию вид флажка, при этом он занимает все пространство. Странно, правда? Это невидимо, но технически все еще существует. Мы делаем это с помощью:

• изменяет свое положение на абсолютное
• устанавливает внешний вид на нет и
• устанавливает его ширину и высота до 100% .

  ввод {
  -webkit-appearance: нет; / * Safari * /
  курсор: указатель; / * Показать интерактивный элемент * /
  высота: 100%;
  позиция: абсолютная;
  ширина: 100%;
}  

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

  input :: before {
  фон: #fff;
  радиус границы: 50 пикселей;
  содержание: "";
  высота: 70%;
  позиция: абсолютная;
  верх: 50%;
  преобразовать: перевести (7px, -50%); / * Перенести стиль в центр элемента * /
  ширина: 85%;
}  

Что, подожди? Вы могли подумать, что :: before не будет работать с замененным элементом, например . И это правда, но только когда тип ввода — image что эквивалентно элементу . Другие элементы управления формой, такие как флажок, определены как незамещенные элементы в спецификации HTML.

Затем нам нужно создать кнопку «toggle», и так получилось, что у нас все еще есть псевдоэлемент :: after чтобы сделать это. Но стоит упомянуть две вещи:

1. Фон представляет собой линейный градиент .
2. Кнопка «переключения» перемещена в центр со свойством transform .

  input :: after {
  фон: linear-gradient (вправо, оранжевый, # 8e2de2);
  радиус границы: 50 пикселей;
  содержание: "";
  высота: 25 пикселей;
  непрозрачность: 0,6;
  позиция: абсолютная;
  верх: 50%;
  преобразовать: перевести (7px, -50%);
  переход: все .4s;
  ширина: 25 пикселей;
}  

Попробуйте нажать на переключатель. Ничего не произошло. Это потому, что мы фактически не меняем отмеченное состояние . А даже если бы и были, результат… неприятный.



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

  ввод: проверено :: после {
  непрозрачность: 1;
  преобразовать: перевести (170%, -50%);
}  

Градиент градиента

Мы можем украсить изображения рамками, чтобы они выделялись или лучше вписывались в дизайн. Вы знали, что мы можем использовать градиент на границе? Что ж, мы можем с :: before (конечно, есть и другие способы).

Основная идея состоит в том, чтобы создать градиент поверх изображения и использовать свойство CSS z-index с отрицательным значением. Отрицательное значение вытягивает градиент под изображением в порядке наложения. Это означает, что изображение всегда отображается сверху, если градиент имеет отрицательный z-index .

  .gradient-border :: before {
  / * Визуализирует стили * /
  содержание: "";
  / * Заполняет все пространство * /
  позиция: абсолютная;
  верх: 0;
  слева: 0;
  внизу: 0;
  справа: 0;
  / * Создает градиент * /
  фоновое изображение: линейный градиент (# 1a1a1a, # 1560bd);
  / * Накладываем градиент за изображением * /
  z-индекс: -1;
}

фигура {
  / * Удаляет поле по умолчанию * /
  маржа: 0;
  / * Сжимает изображение, открывая за ним градиент * /
  отступ: 10 пикселей;
}  

Наложения градиента

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

Хотя это похоже на то, что мы только что сделали, вы заметите несколько явных отличий:

  рисунок :: перед {
  background-image: linear-gradient (вверху справа, # 1a1a1a, прозрачный);
  содержание: "";
  высота: 100%;
  позиция: абсолютная;
  ширина: 100%;
}  

Видите это? Нет z-index потому что градиент можно накладывать поверх изображения. Мы также добавили прозрачность в фоновый градиент, что позволяет изображению растекаться сквозь градиент. Вы знаете, как оверлей.

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

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



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

  / * Центрирует все * /
.flex-center {
  align-items: center;
  дисплей: гибкий;
  justify-content: center;
}

/ * Стилизует элемент формы * /
.форма {
  фон: #ccc;
  высота: 100vh;
  ширина: 100%;
}

/ * Стилизует ввод * /
.form-row {
  фон: #fff;
  радиус границы: 50 пикселей;
  высота: 40 пикселей;
  маржа: 10 пикселей;
  переполнение: скрыто;
  положение: относительное;
  ширина: 150 пикселей;
}  

Теперь давайте удалим стиль по умолчанию для радиокнопок, снова с внешним видом : нет;

  .form-input {
  -webkit-appearance: нет; / * Safari * /
  внешний вид: нет;
}  

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

  .form-input :: before {
  / * Визуализирует стили * /
  содержание: '';
  / * Показывает, что это интерактивно * /
  курсор: указатель;
  / * Помещает его в верхний левый угол ввода * /
  позиция: абсолютная;
  верх: 0;
  слева: 0;
  / * Занимает все пространство * /
  высота: 100%;
  ширина: 100%;
}

/ * Когда вход находится в проверенном состоянии ... * /
.form-input: checked :: before {
  / * Меняем цвет фона * /
  фон: # 21209c;
}  

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

  .form-input :: after {
  / * Визуализирует стили * /
  содержание: '';
  / * Показывает, что это интерактивно * /
  курсор: указатель;
  / * Небольшой стиль границы * /
  радиус границы: 50 пикселей;
  граница: 4px solid # 21209c;
  / * Позиционирует кольцо * /
  позиция: абсолютная;
  осталось: 10%;
  верх: 50%;
  преобразовать: перевести (0, -50%);
  / * Устанавливаем размеры * /
  высота: 15 пикселей;
  ширина: 15 пикселей;
}

/ * Когда вход находится в проверенном состоянии ... * /
.form-input: checked :: after {
  / * Меняем рамку :: after на белую * /
  граница: сплошная 4px #ffffff;
}  

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

  .form-label {
  цвет: # 21209c;
  размер шрифта: 1.1rem;
  маржа слева: 10 пикселей;
}  

Щелкайте по кнопкам, а по-прежнему ничего не происходит. Вот что происходит. Позиция : абсолютная на :: before и :: after скрывает вещи, когда переключатели отмечены, как все, что встречается в иерархии HTML-документов скрывается, если они не перемещены в новое место в документе HTML или их положение не изменено с помощью CSS. Таким образом, каждый раз, когда выбирается переключатель, его метка закрывается.

Вы, наверное, уже знаете, как это исправить, поскольку мы уже решили то же самое ранее в другом примере? Мы применяем z-index: 1 (или position: absolute ) к метке формы.

  .form-label {
  цвет: # 21209c;
  размер шрифта: 1.1rem;
  маржа слева: 10 пикселей;
  z-индекс: 1; / * Убеждаемся, что этикетка уложена сверху * /
  / * позиция: абсолютная; Это альтернативный вариант * /
}  

Подведение итогов

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

Мы ни в коем случае не охватили все возможности, которые мы можем открыть, если воспользуемся этими дополнительными элементами, которые можно выбрать с помощью CSS. Линн Фишер, однако, сделала из этого хобби, создав удивительные дизайны из одного элемента. И давайте не будем забывать о CSS-графике Дайаны Смит, в котором псевдоэлементы используются в нескольких местах для получения реалистичных, похожих на рисование эффектов.