189 8069 5689

怎么使用CSS3伪元素::marker

这篇文章主要讲解了“怎么使用CSS3伪元素::marker”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用CSS3伪元素::marker”吧！

成都创新互联是一家专注于成都网站设计、网站制作与策划设计,新宁网站建设哪家好?成都创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:新宁等地区。新宁做网站价格咨询:028-86922220

怎么使用CSS3伪元素::marker

什么是 ::marker

CSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3 开始新增，CSS Pseudo-Elements Level 4 中完善的一个比较新的伪元素，从 Chrome 86+ 开始得到浏览器的支持。【学习视频分享：css视频教程】

利用它，我们可以给元素添加一个伪元素，用于生成一个项目符号或者数字。

正常而言，我们有如下结构：

    
  
  • Contagious
    • 
  
  • Stages
    • 
  
  • Pages
    • 
  
  • Courageous
    • 
  
  • Shaymus
    • 
  
  • Faceless
    •

默认不添加任何特殊的样式，它的样式大概是这样：

怎么使用CSS3伪元素::marker

利用 ::marker 我们可以对序号前面的小圆点进行改造：

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

就可以将小圆点改造成任意我们想要的：

怎么使用CSS3伪元素::marker

::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 的一些应用探索

譬如我们经常见到标题前面的一些装饰：

怎么使用CSS3伪元素::marker

或者，我们还可以使用 emoji 表情：

怎么使用CSS3伪元素::marker

都非常适合使用 ::marker 来展示，注意用在非 list-item 元素上需要使用 display: list-item：

Lorem ipsum dolor sit amet


Lorem ipsum dolor sit amet

怎么使用CSS3伪元素::marker

CodePen Demo -- ::marker example

https://codepen.io/Chokcoco/pen/eYvZmpW

::marker 是可以动态变化的

有意思的是，::marker 还是可以动态变化的，利用这点，可以简单制作一些有意思的 hover 效果。

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

怎么使用CSS3伪元素::marker

怎么使用CSS3伪元素::marker

CodePen Demo -- ::marker example

https://codepen.io/Chokcoco/pen/eYvZmpW

搭配 counter 一起使用

可以观察到的是，::marker 伪元素与 ::before、::after 伪元素是非常类似的，它们都有一个 content 属性。

在 content 里，其实是可以作用一些简单的字符串加法操作的。利用这个，我们可以配合 CSS 计数器 counter-reset 和 counter-increment 实现给 ::marker 元素添加序号的操作。

对 counter-increment 还不算很了解的可以移步这里：MDN -- counter-increment

假设我们有如下 HTML：

Lorem ipsum dolor sit amet.


Lorem ipsum dolor sit amet consectetur adipisicing elit.


Itaque sequi eaque earum laboriosam.


Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?


Laudantium sapiente commodi quidem excepturi!


Lorem ipsum dolor sit amet consectetur adipisicing elit.

我们利用 ::marker 和 CSS 计数器 counter-increment 实现一个自动计数且 h4 前面带一个 emoji 表情的有序列表：

body {
  counter-reset: h4;
}

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

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

效果如下，实现了一个自动给 ::marker 元素添加序号的效果：

怎么使用CSS3伪元素::marker

感谢各位的阅读，以上就是“怎么使用CSS3伪元素::marker”的内容了，经过本文的学习后，相信大家对怎么使用CSS3伪元素::marker这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


文章题目：怎么使用CSS3伪元素::marker
网页URL：http://cdxtjz.com/article/giiecg.html

其他资讯