在网页设计中，为了使列表更加醒目和易于阅读，我们经常会在列表项前加上标记。本教程将介绍如何使用CSS轻松实现列表红色方块标记的效果。
准备工作
在开始之前，请确保您的电脑上已安装了文本编辑器（如Notepad++、Sublime Text等），并且对基本的HTML和CSS有所了解。
HTML结构
首先，我们需要创建一个简单的HTML列表。以下是一个示例：
- 项目一
- 项目二
- 项目三
在这个例子中，我们创建了一个无序列表
-
，并给它添加了一个类名
red-square-list
。
CSS样式
接下来，我们将使用CSS为列表添加红色方块标记。以下是实现该效果的CSS代码：
.red-square-list {
list-style-type: none; /* 移除默认的列表标记 */
padding-left: 20px; /* 为列表项添加左边距 */
}
.red-square-list li {
position: relative; /* 为列表项添加相对定位 */
padding-left: 20px; /* 为列表项添加左边距 */
}
.red-square-list li:before {
content: “”; /* 创建一个不可见的内容 */
position: absolute; /* 绝对定位 */
left: 0; /* 将标记放置在列表项的左侧 */
top: 5px; /* 调整标记的位置 */
width: 10px; /* 设置标记的宽度 */
height: 10px; /* 设置标记的高度 */
background-color: red; /* 设置标记的背景颜色 */
border-radius: 50%; /* 将标记设置为圆形 */
}
这段CSS代码做了以下几件事情：
移除默认的列表标记。
为列表项添加左边距，以便容纳红色方块标记。
使用
:before
伪元素创建一个不可见的元素，并将其设置为绝对定位。
设置标记的位置、大小和背景颜色。
将标记设置为圆形。
效果预览
将以上HTML和CSS代码保存为
.html
和
.css
文件，并在浏览器中打开HTML文件，您将看到以下效果：
通过本教程，您已经学会了如何使用CSS轻松实现列表红色方块标记的效果。希望这篇教程对您有所帮助！