Скриншот AtoZ CSS: CSS псевдоэлементы

Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .

расшифровка

Псевдоэлементы — это элементы на странице, которые не найдены в коде HTML.

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

Два специальных псевдоэлемента — :before и :after могут использоваться для генерации контента на странице из CSS и имеют много потенциальных вариантов использования.

В этом эпизоде ​​мы узнаем о:

• Пять разных псевдоэлементов
• Создание контента, такого как текст, значения атрибутов изображений и счетчики из CSS
• И как сделать сложные формы с минимальной разметкой

Псевдоэлементы

В CSS есть пять псевдоэлементов:

• :first-line
• :first-letter
• :selection
• :before
• :after

Они отличаются от псевдоклассов с двойным двоеточием, но для краткости часто пишутся в CSS с одним двоеточием.

У меня есть длинная цитата текста заполнителя здесь. Я могу изменить color первой строки текста с помощью :first-line которая сохраняется даже при перекомпоновке текста. Я могу создать буквицу, стилизовав :first-letter с помощью float и большего размера font-size . И я могу изменить color выделенного текста с помощью :selection .

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

 blockquote { position: relative; border-left: 5px solid #66d9ef; padding: 1em 1em 1em 2em; } blockquote p: first-line { color: #cc3f85; } blockquote p: first-letter { float: left; font-size: 4em; margin-right: 0.5em; } ::selection { background: #cc3f85; color: #fff; } blockquote:before { content: "“"; position: absolute; top: 0; left: -0.6em; font- size: 8em; font-family: Georgia; } blockquote:after { content: "”"; bottom: -0.25em; right: -0.5em; line-height: 1rem; } blockquote:before, blockquote: after { position: absolute; color: #66d9ef; font-size: 8em; font-family: Georgia; } тем blockquote { position: relative; border-left: 5px solid #66d9ef; padding: 1em 1em 1em 2em; } blockquote p: first-line { color: #cc3f85; } blockquote p: first-letter { float: left; font-size: 4em; margin-right: 0.5em; } ::selection { background: #cc3f85; color: #fff; } blockquote:before { content: "“"; position: absolute; top: 0; left: -0.6em; font- size: 8em; font-family: Georgia; } blockquote:after { content: "”"; bottom: -0.25em; right: -0.5em; line-height: 1rem; } blockquote:before, blockquote: after { position: absolute; color: #66d9ef; font-size: 8em; font-family: Georgia; } 

Сгенерированный контент

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

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

Добавление изображения аналогично добавлению background-image с помощью url() . Здесь используйте url() в качестве значения свойства content . Я на самом деле предпочитаю использовать фоновые изображения и просто предоставлять доступ к псевдоэлементам, создавая пустую строку для content . Это дает больше контроля над изображением, так как становятся доступны все обычные свойства, такие как background-position , background-repeat и background-size .

 li:before { content: url(star.png); display: inline-block; vertical-align: middle; margin-right: 0.5em; } 

Можно также ввести значение атрибута HTML на страницу, используя свойство content . При создании таблицы стилей печати я хотел бы добавить следующий фрагмент кода для вывода URL-адресов ссылок, чтобы их можно было прочитать со страницы:

 a[href]: not([href*="#"]): after { content: attr(href); } 

Это добавит ссылку после текста ссылки для любых ссылок, которые не являются внутренними или хэш-ссылками.

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

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

Для каждого h2 я буду увеличивать счетчик «разделов», а для каждого элемента списка я буду увеличивать счетчик «элементов». Перед каждым заголовком раздела я выведу значение счетчика разделов, а перед каждым элементом списка выведу значение счетчика элементов. Дополнительные счетчики могут быть добавлены между счетчиками для создания сложной системы нумерации. Упрощенная форма этого метода может использоваться для управления оформлением чисел или маркеров в списках.

 h2 {counter-increment: section;} ul {counter-reset: item;} li {counter-increment: item;} h2:before { content: counter(section) " - "; } li:before { content: counter(section) "." counter(item); } 

Формы

Поскольку каждый элемент на странице может иметь два «дополнительных» элемента, и их можно стилизовать так, как нам нравится, можно создавать всевозможные сложные формы.

Размышляя над примером для демонстрации, я наткнулся на ссылку фигур на CSS-хитрости; один из них действительно выделялся, и я собираюсь пройти через процесс, как это работает. Давайте сделаем символ Инь-Ян одним элементом.

 .yin-yang { position: relative; width: 200px; height: 200px; border-style: solid; border-color: black; border-width: 4px 4px 100px 4px; background: #fff; border-radius: 100%; } .yin-yang: before, .yin-yang: after { content: ""; position: absolute; top: 50%; border-radius: 100%; width: 24px; height: 24px; } .yin-yang: before { background: white; left: 0; border: 36px solid black; } .yin-yang:after { background: black; left: 50%; border: 36px solid white; } 

Начиная с коробки, это можно превратить в круг с border-radius . Два цветных полукруга могут быть созданы с помощью border-bottom , равной height круга. Две точки создаются путем создания еще двух кругов с псевдоэлементами и размещения их с position:absolute . Используя границы, соответствующие color полукругов, можно создать два закругленных конца символа. Довольно мило, если вы спросите меня.

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