Главная » Языки программирования

Before css pseudo element

Содержание
  1. Псевдоэлементы
  2. Кратко
  3. Пример
  4. : : placeholder
  5. : : marker
  6. Подсказки
  7. На практике
  8. Андрей Пилюгин советует
  9. Алёна Батицкая советует
  10. ::before
  11. Try it
  12. Syntax
  13. Examples
  14. Adding quotation marks
  15. HTML
  16. CSS
  17. Result
  18. Decorative example
  19. HTML
  20. CSS
  21. Result
  22. To-do list
  23. HTML
  24. CSS
  25. JavaScript
  26. Result
  27. Special characters
  28. HTML
  29. CSS
  30. Result
  31. Accessibility concerns
  32. Specifications
  33. Browser compatibility
  34. See also
  35. Found a content problem with this page?
  36. MDN
  37. Support
  38. Our communities
  39. Developers

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

Вы не создавали этот элемент? А он есть! Всё благодаря CSS.

Кратко

Скопировать ссылку «Кратко» Скопировано

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

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

Пример

Скопировать ссылку «Пример» Скопировано

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

   
Good evening, Clarice.
  header class="header"> h1 class="header__title">Good evening, Clarice.h1> header>      
 .header  background: #999999 url("background.svg") no-repeat center / cover;> .header__title  color: #ffffff; font-size: 82px; text-transform: uppercase; text-align: center;> .header  background: #999999 url("background.svg") no-repeat center / cover; > .header__title  color: #ffffff; font-size: 82px; text-transform: uppercase; text-align: center; >

Внешний вид псевдоэлемента ::selection

Если выделить текст в этом примере, то станет видно, что фон выделения ярко-красного цвета.

: : placeholder

Скопировать ссылку «::placeholder» Скопировано

Он позволяет стилизовать подсказку, которая выводится в поле ввода текста ( ).

Текст подсказки задаётся при помощи атрибута placeholder у тега .

  input type="email" placeholder="test@example.com">

Внешний вид псевдоэлемента ::placeholder

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

Используйте псевдоэлемент : : placeholder и задайте нужные стили для подсказки. Можно изменить всё, вплоть до шрифта. При этом стили текста, который будет вводить пользователь, не будут затронуты.

 input::placeholder  color: #2E9AFF;> input::placeholder  color: #2E9AFF; >

: : marker

Скопировать ссылку "::marker" Скопировано

: : marker — псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.

Подсказки

Скопировать ссылку "Подсказки" Скопировано

💡 Обязательно проверяйте поддержку псевдоэлемента в нужных браузерах. Для этого можно использовать сайт Can I use.

💡 Для свойства content есть несколько полезных трюков. Например, можно с помощью data-атрибута у тега (которому можно задать значение при помощи JavaScript) и значения attr ( data - атрибут ) вывести количество непрочитанных сообщений на лейбле. Или количество товаров в корзине. Такой способ будет «дешевле» в том плане, что реальная HTML-разметка не изменяется.

💡 В качестве значения свойства content можно вставлять юникод. Например, можно добавить символ копирайта при помощи записи content : "& # 169;" .

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

На практике

Скопировать ссылку "На практике" Скопировано

Андрей Пилюгин советует

Скопировать ссылку "Андрей Пилюгин советует" Скопировано

🛠 Так как псевдоэлементы : : before и : : after отсутствуют в дереве DOM, то невозможно на них повесить JavaScript-событие. В большинстве случаев достаточно отслеживать события на самом элементе и через него менять свойства псевдоэлемента. Если необходимо отследить, например, клик именно по псевдоэлементу, то можно использовать хак со сравнением offset X .

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

️ Это демонстрационный пример. В реальной жизни лучше так не делать. Используйте подходящие HTML-теги.

 0 span class="quantity-change">0span>

Зададим стили для поля ввода:

 .quantity-change  display: flex; align-items: center; justify-content: space-between; width: 160px; height: 44px; border-radius: 6px; background-color: #2E9AFF; color: #000000; font-size: 24px; cursor: text; user-select: none;> .quantity-change  display: flex; align-items: center; justify-content: space-between; width: 160px; height: 44px; border-radius: 6px; background-color: #2E9AFF; color: #000000; font-size: 24px; cursor: text; user-select: none; >

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

Управляющие контролы (в роли которых у нас выступят : : before и : : after ) будут по 40 px:

 .quantity-change::before, .quantity-change::after  display: flex; align-items: center; justify-content: center; width: 40px; font-size: 34px; cursor: pointer;> .quantity-change::before  content: '–';> .quantity-change::after  content: '+';> .quantity-change::before, .quantity-change::after  display: flex; align-items: center; justify-content: center; width: 40px; font-size: 34px; cursor: pointer; > .quantity-change::before  content: '–'; > .quantity-change::after  content: '+'; >

Теперь, зная ширину элементов и контролов, считаем, что нажатие первых 40 px является событием для : : before , а нажатие последних 40 px — для : : after :

 const quantity = document.querySelector('.quantity-change')let counter = Number(quantity.textContent) quantity.addEventListener('click', (event) =>  if(event.offsetX 0)  counter-- > else if(event.offsetX >= 120)  counter++ > quantity.textContent = counter>) const quantity = document.querySelector('.quantity-change') let counter = Number(quantity.textContent) quantity.addEventListener('click', (event) =>  if(event.offsetX  40 && counter > 0)  counter-- > else if(event.offsetX >= 120)  counter++ > quantity.textContent = counter >)

Бинго! Теперь мы можем отследить нажатия на псевдоэлементы и выполнить нужные действия.

Данный метод стоит применять с осторожностью, с оглядкой на медиавыражения, которые могут изменить размеры элемента и всё сломать. Если есть возможность спроектировать свой код без связки «Псевдоэлементы + JavaScript», то это будет хорошим решением.

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Очень интересный и полезный трюк — задавать кастомный счётчик спискам. Бывает необходимость добавить скобки после цифры вместо стандартной точки.

Для создания кастомного счётчика первым делом нужно сбросить стандартные маркеры списка:

 .list  list-style-type: none;> .list  list-style-type: none; >

Теперь придумаем и пропишем имя нового счётчика. Имя счётчика будет использоваться дальше.

 .list  list-style-type: none; counter-reset: new-counter;> .list  list-style-type: none; counter-reset: new-counter; >

Говорим браузеру, что считать нужно именно пункты списка:

 .list__item  counter-increment: new-counter;> .list__item  counter-increment: new-counter; >

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

 .list__item::before  content: counter(new-counter) ") ";> .list__item::before  content: counter(new-counter) ") "; >

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

🛠 Псевдоэлементы — лучшее, что придумали в CSS 😆 С ними жить и верстать гораздо проще. Уделите время и поищите интересные трюки и фишки, которые можно сделать при помощи псевдоэлементов.

Эти маленькие друзья верстальщика могут удивить вас своим могуществом.

Их возможности заслуживают отдельной статьи. Например, такой, которую написал Крис Койер: «A Whole Bunch of Amazing Stuff Pseudo Elements Can Do».

Источник

::before

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Try it

Note: The pseudo-elements generated by ::before and ::after are boxes generated as if they were immediate children of the element on which they are applied, or the "originating element," and thus can not apply to replaced elements, such as , whose content is outside the scope of the CSS formatting model.

Syntax

Note: Selectors Level 3 introduced the double-colon notation ::before to distinguish pseudo-classes from pseudo-elements. Browsers also accept single-colon notation :before , introduced in CSS2.

Examples

Adding quotation marks

One simple example of using ::before pseudo-elements is to provide quotation marks. Here we use both ::before and ::after to insert quotation characters.

HTML

q>Some quotesq>, he said, q>are better than none.q>

CSS

q::before  content: "«"; color: blue; > q::after  content: "»"; color: red; >

Result

Decorative example

We can style text or images in the content property almost any way we want.

HTML

span class="ribbon">Notice where the orange box is.span>

CSS

.ribbon  background-color: #5bc8f7; > .ribbon::before  content: "Look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; >

Result

To-do list

In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.

HTML

ul> li>Buy milkli> li>Take the dog for a walkli> li>Exerciseli> li>Write codeli> li>Play musicli> li>Relaxli> ul>

CSS

li  list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; > li.done  background: #ccff99; > li.done::before  content: ""; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; >

JavaScript

const list = document.querySelector("ul"); list.addEventListener( "click", (ev) =>  if (ev.target.tagName === "LI")  ev.target.classList.toggle("done"); > >, false, );

Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the ::before that has been styled in CSS. Go ahead and get some stuff done.

Result

Special characters

As this is CSS; not HTML, you can not use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

HTML

ol> li>Crack Eggs into bowlli> li>Add Milkli> li>Add Flourli> li aria-current="step">Mix thoroughly into a smooth batterli> li>Pour a ladleful of batter onto a hot, greased, flat frying panli> li>Fry until the top of the pancake loses its glossli> li>Flip it over and fry for a couple more minutesli> li>serve with your favorite toppingli> ol>

CSS

li  padding: 0.5em; > li[aria-current="step"]  font-weight: bold; > li[aria-current="step"]::after  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/ display: inline; >

Result

Accessibility concerns

Using a ::before pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Читайте также:  Нет редиректа index php
Оцените статью
© 2024 Программирование