CSS 基础学习-229 css使用计数器

由 hrs, 4 九月, 2023

实例代码：


<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body{
				counter-reset:section;  /*重置数字递增*/

			}
			h2::before {   /*使用伪元素::before 在H2 标签前插入*/
				counter-increment:section;   /* 数字递增*/
				content:"Section "counter(section)": ";  /*内容输出*/
			}
		</style>
	</head>
	<body>
		<h1>使用CSS计数器：</h1>
		<h2>HTML 教程</h2>
		<h2>CSS 教程</h2>
		<h2>JavaScript 教程</h2>
	</body>
</html>

运行效果：

标签

评论