<style>
ol>li {
list-style-type:none;
counter-increment:item;
}
ol>li:before {
width:1.5em;
font-weight:bold;
content:counter(item) ".";
}
</style>
<html>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</html>
run result:
1.a
2.b
3.c
note: :before 是指设置 'content'的内容样式。
counter 是动态设置li的序列样式，item-->:before item.
相关推荐
::before 用法：view::before，表示在该view组件的前面加入内容 ::after 用法：view::after，表示在该view组件的后面加入内容 这里是双冒号，不是单冒号。单冒号是CSS2的内容，双冒号是CSS3
在这个特定的示例中，我们关注的是CSS中的两个重要概念：伪元素`:after`和`:before`。这两个伪元素允许我们在不添加额外HTML标记的情况下，向元素的内容中插入内容。 `:after`和`:before`伪元素在CSS3中被引入，...
这两个伪元素在CSS3中被正式定义，以区分伪元素（`::before`和`::after`）与伪类（`:before`和`:after`），尽管大多数现代浏览器仍支持单冒号的写法，但推荐使用双冒号以遵循标准。 ### 1. 基本语法 `::before`在...
在本节中，我们将深入探讨:before和:after伪元素的使用和应用，包括它们的基本语法、用法示例和实际应用场景。 :before伪元素 :before伪元素用于在元素之前添加内容，例如，可以使用:before伪元素在元素之前添加一...
众所周知::before与::after两个伪元素其实是CSS3中的内容，然而实际上在CSS2中就已经有了这两者的身影，只不过CSS2中是前面加一个冒号来表示（:before和:after）。今天主要讲讲这两个伪元素该如何使用。 一、与普通...
请注意，这个插件并不会直接处理CSS中的`:before`选择器，而是需要通过jQuery的方法来指定内容。 在实际应用中，jQuery.pseudo.js的使用需要配合其他CSS样式。例如，如果要设置`:before`伪类的样式，你需要在CSS中...
- 如何使用伪元素(`::before`, `::after`)生成内容。 - 自定义列表项标记的方法。 3. **表格布局(Table Layout)**： - 使用`<table>`标签及其相关属性创建表格。 - 表格布局与响应式设计的最佳实践。 4. **...
总结来说，使用CSS3的`::before`和`::after`特性创建搜索图标是一种高效且灵活的方法。它允许我们在不改变HTML结构的情况下添加图标，提高了代码的可维护性和性能。结合其他CSS3特性，如动画和转换，我们可以创建出...
利用CSS的伪元素`:before`和`:after`可以创建小三角形。...通常，通过设置伪元素的`border`属性，可以...这种方法不仅简单而且灵活，可以应用于很多需要使用小图形的场景中，比如箭头指示、信息提示或者简单的图标设计等。
### 使用方法 要使用`:before`和`:after`伪元素，首先需要指定`content`属性，然后定义其样式。例如： ```css element:before { content: "这里是添加的内容"; /* 其他样式 */ } ``` ### 实际应用实例 在给定...
CSS中伪元素的使用不仅仅局限于简单的添加元素、加小标和清浮动。事实上，CSS的:before和:after伪元素提供了一种强大的手段来在页面上创建和操作内容，而无需更改实际的HTML文档结构。在介绍:before和:after伪元素的...
本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景，如填充文本、作为iconfont、进度线、时间线以及几何图形。 1. 介绍 1.1 说明 CSS中的:befor、:after都会创建一个伪元素，其中:befor创建的伪元素是所选...
根据提供的文件信息，“精通CSS：高级Web标准解决方案（第2版）”这本书是前端开发领域内关于CSS技术的重要参考资料之一。接下来将详细解读该书所涵盖的一些关键知识点，并结合前端CSS技术的发展趋势来深入探讨。 #...
### 纯CSS箭头效果实现方法 在Web开发中，使用CSS来创建美观且功能性的用户界面是一项基本技能。本文将详细介绍如何仅通过CSS来实现一个带有箭头的菜单效果，无需借助任何图片资源或JavaScript代码。这种方法不仅...
CSS Code复制内容到剪贴板 .clearfix:before, .clearfix:after { content:; display:table; } .clearfix:after{ clear:both; overflow:hidden; } .clearfix{ *zoom:1; } 如果外部有一个div...
当你需要改变伪类样式时，可以创建一个新的CSS类，然后使用JavaScript或jQuery的`addClass`方法将这个新类添加到目标元素上。例如，创建一个`.green`类： ```css .green:before { content: 'green'; background...
本文将详细介绍`<hr>`标签的各种CSS用法。 1. **基本使用** `<hr>`标签默认会生成一条横跨页面的单线条。例如： ```html ``` 默认情况下，它具有一定的宽度、颜色和厚度。可以通过CSS来调整这些属性。 2. **...