关于前端:CSS-marker-让文字序号更有意思

本文将介绍 CSS 中一个比拟有意思的伪元素 ::marker，利用它，咱们能够让咱们的文字序号变得更加的有意思！

什么是 ::marker

CSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3 开始新增，CSS Pseudo-Elements Level 4 中欠缺的一个比拟新的伪元素，从 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 — content 内容，相似于 ::before 伪元素 的 content，用于填充序号内容
• text-combine-upright (en-US), unicode-bidi and direction properties — 文档书写方向相干

::marker 的一些利用摸索

譬如咱们常常见到题目后面的一些装璜：

或者，咱们还能够应用 emoji 表情：

都非常适合应用 ::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 是能够动态变化的

有意思的是，::marker 还是能够动态变化的，利用这点，能够简略制作一些有意思的 hover 成果。

譬如这种，没被选中不开心，选中开心的成果：

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

CodePen Demo — ::marker example

搭配 counter 一起应用

能够察看到的是，::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 和 CSS 计数器 counter-increment 实现一个主动计数且 h3 后面带一个 emoji 表情的有序列表：

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 元素增加序号的成果：

CodePen Demo — ::marker example

最初

本文介绍了什么是 ::marker 以及它的一些实用场景，能够看出尽管 ::before、::after 也能实现相似的性能，但 CSS 还是提供了更具备语义化的标签 ::marker，也表明了大家须要对本人的前端代码（HTML/CSS）的语义化更加重视。

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。