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实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
CSS中Single Div 绘图技巧的实现
You might like
PHP 可阅读随机字符串代码
2010/05/26 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
微信小程序API—获取定位的详解
2019/04/30 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python网络编程详解
2017/10/31 Python
python图像常规操作
2017/11/11 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python3.8中使用f-strings调试
2019/05/22 Python
python进阶之自定义可迭代的类
2019/08/20 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
开学典礼决心书
2014/03/11 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
裁员通知
2015/04/25 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android