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的属性transition制作菜单导航效果
Sep 01 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
CSS中Single Div 绘图技巧的实现
You might like
德生H-501的评价与改造
2021/03/02 无线电
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python如何为被装饰的函数保留元数据
2018/03/21 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python实现小球弹跳效果
2019/05/10 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
postman和python mock测试过程图解
2020/02/22 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
英国网上购买门:Direct Doors
2018/06/07 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
关于元旦的广播稿
2014/02/16 职场文书
坎儿井导游词
2015/02/09 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
业务员管理制度范本
2015/08/06 职场文书