css ::marker伪元素,修改li的项目符号颜色,字号字体

2024-01-16 07:08

本文主要是介绍css ::marker伪元素,修改li的项目符号颜色,字号字体,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

现在,在使用 <ul> 或 <ol> 时自定义数字或项目符号的颜色,大小或类型很简单。

利用css的:marker伪元素,我们可以很轻易的更改内容以及项目符号和数字的某些样式。

::marker伪元素它作用在任何设置了display:list-item的元素或伪元素上。

::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使用说明

1、除了ul或ol下的li标签可直接使用::marker伪元素,其他元素使用需要设置display:list-item的属性才支持哦。

2、其次,对于::marker伪元素的样式,不是任何样式属性都能使用,目前只支持如下这样样式:(另外注意不允许的 background 属性是没有效果的)

animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space

3、::marker伪元素标记不是所有浏览器都支持,包括chrome也只是在80以上版本通过启用experimental Web Platform才支持,而safari浏览器目前还不支持对content进行自定义,只支持比较原始的几种。

::marker调试

Chrome DevTools随时可以帮助你检查,调试和修改应用于 ::marker 伪元素的样式。


总结

列表在前端项目中很常见,应用场景也十分广泛。个人觉得,::marker伪元素是对list-style-image和list-style-text的补充,三者都是定义标记块的填充内容,image注重图像,text注重字符串,::marker则可以定font、color等样式,各具特色。

学习更多技能

请点击下方公众号

这篇关于css ::marker伪元素,修改li的项目符号颜色,字号字体的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/611695

相关文章

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W

通过C#获取PDF中指定文本或所有文本的字体信息

《通过C#获取PDF中指定文本或所有文本的字体信息》在设计和出版行业中,字体的选择和使用对最终作品的质量有着重要影响,然而,有时我们可能会遇到包含未知字体的PDF文件,这使得我们无法准确地复制或修改文... 目录引言C# 获取PDF中指定文本的字体信息C# 获取PDF文档中用到的所有字体信息引言在设计和出

Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

《Python中requests与aiohttp在实际项目中的选择策略详解》本文主要介绍了Python爬虫开发中常用的两个库requests和aiohttp的使用方法及其区别,通过实际项目案... 目录一、requests 库二、aiohttp 库三、requests 和 aiohttp 的比较四、requ

SpringBoot项目启动后自动加载系统配置的多种实现方式

《SpringBoot项目启动后自动加载系统配置的多种实现方式》:本文主要介绍SpringBoot项目启动后自动加载系统配置的多种实现方式,并通过代码示例讲解的非常详细,对大家的学习或工作有一定的... 目录1. 使用 CommandLineRunner实现方式:2. 使用 ApplicationRunne

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》:本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.

python修改字符串值的三种方法

《python修改字符串值的三种方法》本文主要介绍了python修改字符串值的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录第一种方法:第二种方法:第三种方法:在python中,字符串对象是不可变类型,所以我们没办法直接

Python项目打包部署到服务器的实现

《Python项目打包部署到服务器的实现》本文主要介绍了PyCharm和Ubuntu服务器部署Python项目,包括打包、上传、安装和设置自启动服务的步骤,具有一定的参考价值,感兴趣的可以了解一下... 目录一、准备工作二、项目打包三、部署到服务器四、设置服务自启动一、准备工作开发环境:本文以PyChar