CSS 伪元素::marker详解


Posted in HTML / CSS onJune 26, 2021

本文将介绍 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>

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

CSS 伪元素::marker详解

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

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

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

CSS 伪元素::marker详解

::marker 伪元素的一些限制

首先,能够响应 ::marker 的元素只能是一个 list item,譬如 ul 内部的 liol 内部的 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 的一些应用探索

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

CSS 伪元素::marker详解

或者,我们还可以使用 emoji 表情:

CSS 伪元素::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 是可以动态变化的

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

譬如这种,没被选中不开心,选中开心的效果:

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

CSS 伪元素::marker详解

CodePen Demo -- ::marker example

搭配 counter 一起使用

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

content 里,其实是可以作用一些简单的字符串加法操作的。利用这个,我们可以配合 CSS 计数器 counter-resetcounter-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 元素添加序号的效果:

CSS 伪元素::marker详解

CodePen Demo -- ::marker example

最后

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

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

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

到此这篇关于CSS ::marker 让文字序号更有意思的文章就介绍到这了,更多相关CSS ::marker内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
CSS中Single Div 绘图技巧的实现
You might like
使用php shell命令合并图片的代码
2011/06/23 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
javascript实现表单验证
2016/01/29 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
Angular4表单验证代码详解
2017/09/03 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
文秘专业个人求职信
2013/12/22 职场文书
单身联谊活动方案
2014/01/29 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
初中同学会活动方案
2014/08/22 职场文书
学籍证明模板
2014/11/21 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书