CSS ::marker 让文字序号更有意思
本文将介绍 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>
默认不添加任何特殊的样式,它的样式大概是这样:
利用 ::marker
我们可以对序号前面的小圆点进行改造:
li {
padding-left: 12px;
cursor: pointer;
color: #ff6000;
}
li::marker {
content: '>';
}
就可以将小圆点改造成任意我们想要的:
::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
:
<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: '';
}
CodePen Demo -- ::marker example
搭配 counter 一起使用
可以观察到的是,::marker
伪元素与 ::before
、::after
伪元素是非常类似的,它们都有一个 content
属性。
在 content
里,其实是可以作用一些简单的字符串加法操作的。利用这个,我们可以配合 CSS 计数器 counter-reset
和 counter-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
元素添加序号的效果:
CodePen Demo -- ::marker example
最后
本文介绍了什么是 ::marker
以及它的一些实用场景,可以看出虽然 ::before
、::after
也能实现类似的功能,但 CSS 还是提供了更具有语义化的标签 ::marker
,也表明了大家需要对自己的前端代码(HTML/CSS)的语义化更加注重。
好了,本文到此结束,希望对你有帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
CSS ::marker 让文字序号更有意思的更多相关文章
- CSS 和 JS 动画哪个更快
基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...
- CSS文本与文字
-255之间 14.2 CSS中的文字属性 属性名称 属性值 说明 font-style norma ...
- CSS vs. JS Animation: 哪个更快
CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- css: transform导致文字显示模糊
css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...
- CSS ::marker All In One
CSS ::marker All In One CSS pseudo element / CSS 伪元素 /* user agent stylesheet */ ::marker { unicode- ...
- 反爬虫破解系列-汽车之家利用css样式替换文字破解方法
网站: 汽车之家:http://club.autohome.com.cn/ 以论坛为例 反爬虫措施: 在论坛发布的贴子正文中随机抽取某几个字使用span标签代替,标签内容位空,但css样式显示为所代替 ...
- css 背景透明文字(内容)不透明三种实现方法
好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...
- [小技巧]兼容IE6的纯CSS背景半透明文字不透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Webpack的热更新是如何做到的?原理是什么?
一.是什么 HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换.添加.删除模块,而无需重新刷新整个应用 例如,我们在应用运行过程中修改了某个模 ...
- 取消本地SVN文件夹与服务器的关联
方法一. 1.新建文本文档,添加内容如下: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Fold ...
- 四、postman关联、参数化
一.postman关联 在实际接口测试中,后一个接口要用到前面接口返回的结果,从而让后面的接口能够正常运行,这个过程的实现成为关联 如上图通过新版本或者老版本的语法把获取的变量access_token ...
- JVM垃圾回收器总结
常见七种垃圾回收器以及使用的垃圾回收算法总结:
- 并查集板子+kruskal
最近在学最小生成树得时候又用到了并查集,一起来整理一下 1.并查集 并查集就是字面意思,将两个单独得集合合并成一个大的集合. 并查集关键在于两个操作:合并和查找 先要完成查找操作(合并操作在查找的基础 ...
- 在C++中调用Python
技术背景 虽然现在Python编程语言十分的火爆,但是实际上非要用一门语言去完成所有的任务,并不是说不可以,而是不合适.在一些特定的.对于性能要求比较高的场景,还是需要用到传统的C++来进行编程的.但 ...
- [c++] 细节
\r退格:printf("asdflkj\r111")输出111flkj(https://blog.csdn.net/tyshtang/article/details/436770 ...
- head元素的内容
一.head元素 head元素的内容用来向浏览器提供一些文档信息,此外还可以包含js脚本和css层叠样式单.head中一般包含title.meta.css.js等内容,head中元素的内容在浏览器中不 ...
- [前端] JSON
背景 JavaScript对象表示法(JavaScript Object Notation):是一种存储数据的方式 JSON对象 创建 var gareen = {"name":& ...
- 【转载】使用rdp协议访问远程Linux桌面
使用rdp协议访问远程Linux桌面 2017年03月31日 16:23:49 太阳之影 阅读数:2169 一般情况下,如果需要登陆远程Linux系统,我们会使用ssh/telnet来完成,如果需 ...