CSS---序号使用css设置,counter-reset、counter-increment、content配合实现备注文案的序号展示

直接上代码,全代码copy即可使用!

<template><div class="reminder"><span class="Bold_12_body" style="line-height: 8vw">温馨提示:</span><br /><div class="rule-container"><div class="Regular_12_body subtitleColor rule">提示提示提示提示提示提示123123提示提示提示提示提示提示提示提示23</div><div class="Regular_12_body subtitleColor rule">提示提示提示提示提示提示3123123提示提示提示提示提示提示提示提示23</div><div class="Regular_12_body subtitleColor rule">提示提示提示提示提示提示提12312示提示提示提示提示提示提示提示23</div></div></div>
</template><script setup></script>
<style lang="less" scoped>
.reminder {padding: 25px;
}
.rule-container {counter-reset: rule-counter; /* 重置计数器 */
}.rule {display: flex;justify-content: flex-start;
}.rule::before {counter-increment: rule-counter; /* 计数器递增 */content: counter(rule-counter) '. '; /* 设置序号内容 */margin-right: 0.5em; /* 序号与文字之间的间距 */
}.rule::after {content: attr(data-text); /* 设置文字内容 */display: block; /* 换行显示 */text-indent: 2em; /* 文字首行缩进 */
}
</style>

效果如下:其中注意如果是全数字的话,不会换行,需要自己修改使用哦!

上面属性可能存在兼容性,如果确定不会使用老版本浏览器就可以!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/879579.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

共享内存C(Linux)

在学习的时候遇到问题&#xff0c;就是将结构体作为共享内存时将string类型置入结构体内&#xff0c;导致程序出现段错误&#xff0c;后来经过排查发现共享内存是c语言的库不支持string类型&#xff0c;需要用char name[20]代替。 1.在Linux中如何查看共享内存 &#xff08;1&…

【Hot100】LeetCode—84. 柱状图中最大的矩形

目录 1- 思路题目识别单调栈 2- 实现⭐84. 柱状图中最大的矩形——题解思路 3- ACM 实现 原题链接&#xff1a;84. 柱状图中最大的矩形 1- 思路 题目识别 识别1 &#xff1a;给定一个数组 heights &#xff0c;求解柱状图的最大面积 单调栈 使用 Stack 来实现&#xff0c;遍…

go语言中的数组指针和指针数组的区别详解

1.介绍 大家知道C语言之所以强大&#xff0c;就是因为c语言支持指针&#xff0c;而且权限特别大&#xff0c;c语言可以对计算机中任何内存的指针进行操作&#xff0c;这样自然而然也会带来一些不安全的因素&#xff0c;所以在golang中&#xff0c;「取消了对指针的一些偏移&…

【C语言学习路线】

基础知识 了解C语言的历史与应用&#xff1a;了解C语言的起源、发展及其在现代开发中的地位。 安装编译环境&#xff1a;选择合适的开发环境&#xff0c;如GCC、Visual Studio、Code::Blocks等&#xff0c;进行配置。C语言基础 基本语法&#xff1a;学习C语言的基本语法&#x…

【C语言】分支和循环专题应用

分支和循环专题应用 1、随机数生成1.1rand1.2 srand函数介绍1.3 time函数介绍1.4 设置随机数的范围 2、猜数字游戏的代码及实现 通过了分支和循环的介绍学习之后&#xff0c;我们可以运用分支和循环语句写出一些有趣的代码了&#xff0c;让我们来一起探索吧&#xff01; 写一个…

node.js 中的进程和线程工作原理

本文所有的代码均基于 node.js 14 LTS 版本分析 概念 进程是对正在运行中的程序的一个抽象&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;操作系统的其他所有内容都是围绕着进程展开的 线程是操作系统能够进行运算调度的最小单位&#xff0c;其是进程中的一个执…

文献多\bibliographystyle和文献少\begin{thebibliography}

\bibliographystyle 和 \begin{thebibliography} 是 LaTeX 中用于处理文献引用的两种不同方法。它们各自有不同的用法和适用场景&#xff1a; 1. \bibliographystyle 和 \bibliography 这种方法是利用 BibTeX 来管理参考文献数据。通常在文献量大、格式要求严格的情况下使用。…

ARM/Linux嵌入式面经(三四):CVTE

文章目录 1、C++单例模式回答 C++ 单例模式问题2、虚函数、纯虚函数虚函数(Virtual Functions)纯虚函数(Pure Virtual Functions)虚函数与纯虚函数的主要区别面试官可能的追问3、堆和栈区别回答堆和栈的区别面试官可能的追问怎么判断栈的大小?方法?1. **编译器和链接器设…

远程桌面内网穿透是什么?有什么作用?

远程桌面内网穿透指的是通过特定技术手段&#xff0c;将处于内网中的电脑或服务器&#xff0c;通过外部网络&#xff08;互联网&#xff09;进行访问。内网穿透的主要作用是解决在内网环境下&#xff0c;远程设备与外部互联网之间的连接问题&#xff0c;允许用户从外部访问内网…

.Net Gacutil工具(全局程序集缓存工具)使用教程

GAC介绍&#xff1a; GAC&#xff08;Global Assembly Cache&#xff09;全局程序集缓存&#xff0c;是用于存放.Net应用程序共享的程序集。 像平常我们在Visual Studio中引用系统程序集时&#xff0c;这些程序集便来自于GAC。 GAC默认位置为&#xff1a;%windir%\Microsoft…

JavaScript中的export、export default、exports和module.exports(export、export default、exports使用详细)

简介: 在JavaScript中&#xff0c;export 和 export default 是 ES6 模块系统的核心部分&#xff0c;用于从文件中导出函数、关键字&#xff0c;对象或值&#xff0c;使其可以在其他文件中通过 import 语句导入和使用&#xff0c;而 exports和 module.exports 是CommonJS模块系…

【ArcGIS】栅格计算器原理及案例介绍

ArcGIS&#xff1a;栅格计算器原理及案例介绍 栅格计算器&#xff08;Raster Calculator&#xff09;原理介绍案例案例1&#xff1a;计算栅格数据平均值 参考 栅格计算器&#xff08;Raster Calculator&#xff09;原理介绍 描述&#xff1a;在类似计算器的界面中&#xff0c;…

安全通信网络等保

通用要求 1.网络架构 1)应保证网络设备的业务处理能力满足业务高峰期需要。 设备CPU和内存使用率的峰值不大于设备处理能力的70%。 在有监控环境的条件下,应通过监控平台查看主要设备在业务高峰期的资源(CPU、内存等)使用 情况;在无监控环境的情况下,在业务高峰期登录…

基于对数变换的图像美白增强,Matlab实现

博主简介&#xff1a;matlab图像处理&#xff08;QQ:3249726188&#xff09; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 本次案例是基于对数变换的图像美白增强&#xff0c;用matlab实现。 一、案例背景和算法介绍 这次案例是美白算法&…

在实际LabVIEW开发中,哪些算法是常用的?

在LabVIEW的实际开发中&#xff0c;常用的算法主要集中在数据处理、控制系统、信号处理、图像处理等领域。以下是一些常用算法的介绍&#xff1a; 1. PID控制算法 PID&#xff08;比例-积分-微分&#xff09;控制是LabVIEW中常用的算法之一&#xff0c;广泛应用于工业自动化和…

剃(磨)前插齿刀设计计算开发第一步

之前接触滚刀比较多&#xff0c;渐开线齿轮滚刀的基准齿形的参数相对简单&#xff0c;都是由直线和圆弧组成的。插齿刀实质是一个开了前角后后角的“特殊齿轮”&#xff0c;在齿轮的齿形上增加“凸角”和“倒角”相对滚刀基准齿形就要复杂一些了&#xff1a; 要设计一款剃&…

深入分析计算机网络性能指标

速率带宽吞吐量时延时延带宽积往返时间RTT利用率丢包率图书推荐内容简介作者简介 速率 连接在计算机网络上的主机在数字信道上传送比特的速率&#xff0c;也称为比特率或数据率。 基本单位&#xff1a;bit/s&#xff08;b/s、bps&#xff09; 常用单位&#xff1a;kb/s&#x…

UVM仿真的运行(四)—— objection 机制

0. 引言 前面介绍了uvm仿真的启动,按照domain中指定的DAG的phase node 顺序执行各个组件的phase。 在执行run_phase node的Executing 状态时,以fork...join_none的方式在后台调用run_phase imp的traverse方法去并行执行各个component的run_phase方法,同时会等待task运行结…

MacOS Catalina 从源码构建Qt6.2开发库之01: 编译Qt6.2源代码

安装xcode&#xff0c; cmake&#xff0c; ninja brew install node mac下安装OpenGL库并使之对各项目可见 在macOS上安装OpenGL通常涉及到安装一些依赖库&#xff0c;如MGL、GLUT或者是GLEW等&#xff0c;同时确保LLVM的OpenGL框架和相关工具链的兼容性。以下是一个基本的安装…

【算法】动态规划—编辑距离

题目 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符删除一个字符替换一个字符 思路分析 编辑距离问题就是给定两个字符串 s1 和 s2&#xff0c;只能用三种操作…