HTML 伪元素 ::after 可以在一个元素的内容之后插入新的内容，常用于清除浮动、生成内容等方面。下面是一个使用 ::after 的示例 HTML 页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>::after Demo</title>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.box {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>上述示例中，我们定义了一个类名为 clearfix 的容器元素，它的 ::after 伪元素被用于清除浮动。同时，我们还定义了一个 box 类名的元素，它们被包含在 clearfix 容器内，其中 float: left 用于让两个元素并排排列，margin-right 则用于给两个元素之间添加间隔。
在上述示例中，我们定义了 clearfix 类名的容器元素的 ::after 伪元素的 content 属性值为空，这是因为我们只需要在容器元素的内容之后插入一个空块元素来清除浮动即可。而 display: block 则用于让伪元素变成块级元素，从而占据一行的宽度，clear: both 则用于清除左右浮动。
运行上述示例，我们将会看到两个红色正方形元素并排排列，并且它们之间有 20px 的间隔。这是因为我们在 box 类名元素中设置了浮动，而 clearfix 类名容器元素的 ::after 伪元素被用于清除浮动。
正文完