CSS ::marker делает текстовые числа более интересными

JavaScript CSS
CSS ::marker делает текстовые числа более интересными

В этой статье будет представлен более интересный псевдоэлемент в CSS.::marker, используя его, мы можем сделать наш текстовый серийный номер более интересным!

что такое ::маркер

Псевдоэлементы CSS::markerОтCSS Pseudo-Elements Level 3начать добавлять,CSS Pseudo-Elements Level 4Относительно новый псевдоэлемент, усовершенствованный в Chrome 86+, поддерживается браузерами, начиная с Chrome 86+.

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

Обычно мы имеем следующую структуру:

<ul>
  <li>Contagious</li>
  <li>Stages</li>
  <li>Pages</li>
  <li>Courageous</li>
  <li>Shaymus</li>
  <li>Faceless</li>
</ul>

По умолчанию никакого специального стиля не добавляется, и его стиль примерно такой:

использовать::markerМы можем преобразовать маленькую точку перед серийным номером:

li {
  padding-left: 12px;
  cursor: pointer;
  color: #ff6000;
}
li::marker {
  content: '>';
}

Мы можем превратить маленькие точки во все, что захотим:

Некоторые ограничения псевдоэлемента ::marker

Во-первых, уметь отвечать::markerЭлемент может быть только одинlist item,НапримерulВнутреннийli,olВнутреннийliобеlist item.

Конечно, дело не в том, что мы не можем использовать его на других элементах, если захотим, за исключениемlist item, мы можем установить любойdisplay: list-itemИспользование элементов::markerПсевдоэлемент.

Во-вторых, для стилей внутри псевдоэлементов нельзя использовать никакие атрибуты стиля, в настоящее время мы можем использовать только эти:

  • all font properties-- Итак, атрибуты шрифта связаны
  • color -- значение цвета
  • the content property-- контент-контент, похожий на::beforeСодержимое псевдоэлемента, используемого для заполнения содержимого серийного номера.
  • свойства text-combine-upright (en-US), unicode-bidi и direction -- направление написания документа

Некоторое исследование применения ::marker

Например, мы часто видим какие-то украшения перед заголовком:

Кроме того, мы также можем использовать смайлики:

очень подходят для использования::markerчтобы показать, обратите внимание на использование в не-list-itemЭлементы нужно использоватьdisplay: list-item:

<h1>Lorem ipsum dolor sit amet</h1>
<h1>Lorem ipsum dolor sit amet</h1>

h1 {
  display: list-item;
  padding-left: 8px;
}
h1::marker {
  content: '▍';
}
h1:nth-child(2)::marker {
  content: '😅';
}

CodePen Demo -- ::marker example

:: Маркер может быть динамически изменен

Что интересно,::markerЕго по-прежнему можно динамически изменять, используя это, вы можете просто создавать интересные эффекты при наведении курсора.

Например, если вы недовольны, если вас не выбрали, вы будете счастливы, если вас выберут:

li {
  color: #000;
  transition: .2s all;
}
li:hover {
  color: #ff6000;
}
li::marker {
  content: '😩';
}
li:hover::marker {
  content: '😁';
}

CodePen Demo -- ::marker example

Использовать со счетчиком

Можно заметить, что,::markerпсевдоэлемент с::before,::afterПсевдоэлементы очень похожи, все они имеютcontentАтрибуты.

существуетcontentФактически, его можно использовать для некоторых простых операций сложения строк. Используя это, мы можем работать со счетчиками CSS.counter-resetа такжеcounter-incrementреализовать::markerОперация добавления порядкового номера к элементу.

правильноcounter-incrementЕсли вы мало что знаете об этом, то можете зайти сюда:MDN -- counter-increment

Предположим, у нас есть следующий HTML:

<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3>Itaque sequi eaque earum laboriosam.</h3>
<p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p>
<h3>Laudantium sapiente commodi quidem excepturi!</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

мы используем::markerи счетчики CSScounter-incrementосуществляет автоматический подсчет иh3Упорядоченный список, которому предшествует смайлик:

body {
  counter-reset: h3;
}

h3 {
  counter-increment: h3;
  display: list-item;
}

h3::marker {
  display: list-item;
  content: "✔" counter(h3) " ";
  color: lightsalmon;
  font-weight: bold;
}

Эффект заключается в следующем, реализуя автоматический::markerЭлементы добавляют серийный номер:

image

CodePen Demo -- ::marker example

наконец

В этой статье описано, что такое::markerКак и некоторые его практические сценарии, видно, что хотя::before,::afterПодобная функциональность может быть достигнута, но CSS по-прежнему предоставляет больше семантических тегов.::marker, что также показывает, что всем нужно уделять больше внимания семантике своего внешнего кода (HTML/CSS).

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

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

Категории