CSS推陈出新|::marker让文字序号更有意思

本文将介绍 CSS 中一个比较有意思的伪元素 ::marker，利用它，我们可以让我们的文字序号变得更加的有意思!

创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站制作、成都网站设计、新会网络推广、成都小程序开发、新会网络营销、新会企业策划、新会品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供新会建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

什么是 ::marker

CSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3[1] 开始新增，CSS Pseudo-Elements Level 4[2] 中完善的一个比较新的伪元素，从 Chrome 86+ 开始得到浏览器的支持。

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

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

 
 
 
 
    
  
  
  
  
    1.  
  
  
  
  
    •   
    • Contagious
      •  
  
  
  
  
    •   
    • Stages
      •  
  
  
  
  
    •   
    • Pages
      •  
  
  
  
  
    •   
    • Courageous
      •  
  
  
  
  
    •   
    • Shaymus
      •  
  
  
  
  
    •   
    • Faceless
      •  
  
  
  
  
     
    2.

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

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

 
 
 
 
    
  
  
  
  
  1. li { 
    2. 
  
  
  
  
  2.   padding-left: 12px; 
    3. 
  
  
  
  
  3.   cursor: pointer; 
    4. 
  
  
  
  
  4.   color: #ff6000; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. li::marker { 
    7. 
  
  
  
  
  7.   content: '>'; 
    8. 
  
  
  
  
  8. } 
    9.

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

::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：

 
 
 
 
    
  
  
  
  
  1. Lorem ipsum dolor sit amet
     
    2. 
  
  
  
  
  2. Lorem ipsum dolor sit amet
     
    3. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. h1 { 
    2. 
  
  
  
  
  2.   display: list-item; 
    3. 
  
  
  
  
  3.   padding-left: 8px; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. h1::marker { 
    6. 
  
  
  
  
  6.   content: '▍'; 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8. h1:nth-child(2)::marker { 
    9. 
  
  
  
  
  9.   content: ''; 
    10. 
  
  
  
  
  10. } 
    11.

 CodePen Demo -- ::marker example[3]

::marker 是可以动态变化的

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

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

 
 
 
 
    
  
  
  
  
  1. li { 
    2. 
  
  
  
  
  2.   color: #000; 
    3. 
  
  
  
  
  3.   transition: .2s all; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. li:hover { 
    6. 
  
  
  
  
  6.   color: #ff6000; 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8. li::marker { 
    9. 
  
  
  
  
  9.   content: ''; 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11. li:hover::marker { 
    12. 
  
  
  
  
  12.   content: ''; 
    13. 
  
  
  
  
  13. } 
    14.

 

CodePen Demo -- ::marker example[4]

搭配 counter 一起使用

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

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

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

假设我们有如下 HTML：

 
 
 
 
    
  
  
  
  
  1. Lorem ipsum dolor sit amet.
     
    2. 
  
  
  
  
  2. Lorem ipsum dolor sit amet consectetur adipisicing elit.
     
    3. 
  
  
  
  
  3. Itaque sequi eaque earum laboriosam.
     
    4. 
  
  
  
  
  4. Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?
     
    5. 
  
  
  
  
  5. Laudantium sapiente commodi quidem excepturi!
     
    6. 
  
  
  
  
  6. Lorem ipsum dolor sit amet consectetur adipisicing elit.
     
    7.

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

 
 
 
 
    
  
  
  
  
  1. body { 
    2. 
  
  
  
  
  2.   counter-reset: h3; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. h3 { 
    6. 
  
  
  
  
  6.   counter-increment: h3; 
    7. 
  
  
  
  
  7.   display: list-item; 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. h3::marker { 
    11. 
  
  
  
  
  11.   display: list-item; 
    12. 
  
  
  
  
  12.   content: "" counter(h3) " "; 
    13. 
  
  
  
  
  13.   color: lightsalmon; 
    14. 
  
  
  
  
  14.   font-weight: bold; 
    15. 
  
  
  
  
  15. } 
    16.

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

CodePen Demo -- ::marker example[6]

最后

本文介绍了什么是 ::marker 以及它的一些实用场景，可以看出虽然 ::before 、::after也能实现类似的功能，但 CSS 还是提供了更具有语义化的标签 ::marker，也表明了大家需要对自己的前端代码(HTML/CSS)的语义化更加注重。

好了，本文到此结束，希望对你有帮助 ????

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS[7] 。

参考资料

[1]CSS Pseudo-Elements Level 3:

https://drafts.csswg.org/css-lists-3/#marker-pseudo

[2]CSS Pseudo-Elements Level 4:

https://drafts.csswg.org/css-pseudo-4/#marker-pseudo

[3]CodePen Demo -- ::marker example:

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

[4]CodePen Demo -- ::marker example:

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

[5]MDN -- counter-increment:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter-increment

[6]CodePen Demo -- ::marker example:

https://codepen.io/chriscoyier/pen/ExNWmee

[7]Github -- iCSS:

https://github.com/chokcoco/iCSS

本文转载自微信公众号「iCSS前端趣闻」，可以通过以下二维码关注。转载本文请联系iCSS前端趣闻公众号。

本文名称：CSS推陈出新|::marker让文字序号更有意思
URL网址：http://www.shufengxianlan.com/qtweb/news42/29842.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站排名知识

行业网站建设

广安搬家公司　　 　移动机房服务器托管　　 　成都网络营销　　 　四川成都托管服务器　　 　网站推广公司　　 　高端定制网站设计　　 　成都二枢机房　　 　成都app开发　　 　时嘉做网站　　 　网站排名优化　　 　定制网站开发　　 　郫县明安消防器材　　 　成都门窗定制　　 　蓬安网站建设　　 　服务器托管　　 　网络推广公司　　 　网络推广公司　　 　免备案空间　　 　成都电信服务器托管　　 　响应式报价