Псевдоэлементы до и после · Темы веб-разработчиков · Изучение Интернета
Каждый HTML-элемент в коде на самом деле состоит из 3 отдельных элементов — два из них просто скрыты по умолчанию.
Скрытые элементы
Каждый элемент имеет два скрытых элемента, называемых псевдоэлементами, которые можно стилизовать и использовать для создания интересных эффектов.
Элементы названы ::до и ::после из-за того, где они расположены по умолчанию.
Как и любой элемент HTML, они невидимы, потому что внутри них нет содержимого.
Добавление контента
Чтобы добавить контент внутри псевдоэлемента, используйте свойство content .
раздел :: до {
содержание: " "; /* Пространство */
}
.box :: после {
содержание: «Дино»; /* Слово "Дино" */
}
Стилизация до и после
После добавления содержимого к псевдоэлементам они становятся видимыми. Теперь мы можем обращаться с элементами, как с любым другим элементом HTML, и стилизовать их с любым свойством, которое мы хотим.
.box::после {
содержание: «Дино»;
отображение: встроенный блок;
набивка: 0,5 см;
цвет фона: темно-зеленый;
радиус границы: 8px;
}
Позиционирование до и после
Мы можем даже использовать стандартное позиционирование, плавание и т. д., чтобы перемещать их.
Технически они являются внутри своего родительского элемента, поэтому позиция : относительная и позиция : абсолютная применяются правила.
…
.ящик {
положение: родственник;
}
.box:: перед {
содержание: «Дино»;
цвет фона: темно-зеленый;
положение: абсолютное;
верх: -1,5рем;
слева: -5em;
}
Где я это раньше видел?
Возможно, вы помните, что мы использовали ::before и ::after в нескольких других местах ранее:
- При настройке нашего веб-сайта для использования рамки
- В качестве исправления при плавающих элементах
Создание пользовательских маркеров
Маркеры по умолчанию, связанные с неупорядоченными списками в HTML, трудно стилизовать.
С ::before и ::after мы можем заменить их нашими собственными пулями и получить больше контроля над их стилем.
<ул>
С
.дино {
тип стиля списка: нет;
заполнение: 0; /* Возможно, также удалите отступы */
}
.dinos li::before {
содержание: "·"; /* Средняя точка (маленький маркер) */
отображение: встроенный блок;
поле-справа: 0.3em;
цвет: #ccc;
}
Ориентируясь на ::before мы можем назначить любой стиль маркерам, чтобы отличать их от текста.
Причудливые кавычки
При создании кавычек на нашем веб-сайте кажется ненужным создавать элемент с одной кавычкой внутри для стилизации. До и после очень подходят для этой ситуации.
<цитата>На каждом острове Эгейского моря можно найти многочисленные следы существования огромной доисторической империи.
Нам не нужно указывать кавычки в
Затем в нашем CSS мы просто создаем новые кавычки и размещаем их на месте.
цитата {
положение: родственник;
}
цитата :: до {
содержание: """; /* Настоящие фигурные кавычки */
размер шрифта: 3rem;
цвет: ярко-розовый;
положение: абсолютное;
слева: -0.6em;
сверху: 0;
}
цитата :: после {
содержание: """; /* Настоящие фигурные кавычки */
размер шрифта: 3rem;
цвет: ярко-розовый;
положение: абсолютное;
справа: -0,6 эм;
внизу: 0;
}
Другие идеи
- Вы можете использовать
background-imageдля вставки изображений до и после - Проверить счетчики CSS для генерации чисел
- Использовать до и после для создания эффекта скручивания страницы с помощью функции
attr()
Ссылки
- MDN: счетчики CSS
Список видео
- До и после: скрытые элементы
- До и после: пользовательские маркеры
- До и после: кавычки
- До и после: украшения
- MDN: ::before
- MDN: ::after
- CSS-трюки: ::after/: :before
- Могу ли я использовать: Сгенерированное CSS содержимое для псевдоэлементов
- Smashing Magazine: Обучение использованию псевдоэлементов :before и :after в CSS
- Codrops: ::before
- Codrops: ::after
F87: Невыполнение критерия успеха 1.
3.1 из-за вставки недекоративного содержимого с использованием псевдоэлементов :before и :after и свойства ‘content’ в CSS F87: Невыполнение критерия успеха 1.3.1 из-за вставки недекоративного содержимого с использованием псевдоэлементов :before и :after и свойства ‘content’ в CSS | Методы для WCAG 2.0Techniques for WCAG 2.0
Skip to Content (Press Enter)
- Contents
- Intro
- Previous: Failure F86
- Next: Failure F88
On this страница:
- Важная информация о методах
- Применимость
- Описание
- Примеры
- Ресурсы
- Связанные методы
- Тесты
0.Применимость
Все технологии, поддерживающие CSS.
Этот сбой относится к:
- Критерий успеха 1.3.1 (информация и отношения)
- Как познакомиться 1.3.1 (Информация и отношения)
- Понимание критерия успеха 1.3.1 (информация и отношения)
Агент пользователя и примечания по поддержке вспомогательных технологий
См. примечания по поддержке агента пользователя для F87.
Описание
Псевдоэлементы CSS :before и :after определяют расположение содержимого до и после содержимого дерева документа элемента. Свойство content в сочетании с этими псевдоэлементами указывает, что вставляется. Для пользователей, которым необходимо настроить или отключить информацию о стиле для просмотра контента в соответствии со своими потребностями, вспомогательные технологии могут не иметь доступа к информации, вставленной с помощью CSS. Поэтому использовать эти свойства для вставки недекоративного содержимого нельзя.
Примеры
Пример отказа 1
В следующем примере :до и :после используются для обозначения смены говорящего и для вставки кавычек в сценарий.
CSS содержит:
Пример кода:
p.jim:before { content: "Jim: " }
p.mary:before { содержание: "Мэри: " }
q:before { содержание: открытая цитата }
q:after { content: close-quote } Используется в этом отрывке:
Пример кода:
<р>
Как вы думаете, у него получится?Выглядит не очень.
Пример отказа 2
В этом примере :before используется, чтобы отличить факты от мнений.
CSS содержит:
Пример кода:
p.fact:before { content: "Fact: "; вес шрифта: полужирный; }
p.opinion:before { content: "Мнение: "; вес шрифта: полужирный; } В этом отрывке используется:
Пример кода:
Подсудимый находился на месте преступления, когда оно произошло.
