CSS伪元素是前端开发中非常常用的工具，可以解决许多布局问题，其中一个重要的应用是解决塌陷问题。

ul:after {
content: "";
display: block;
clear: both;
}

塌陷问题是指由于浮动元素引起的父元素无法正常显示的情况，通常表现为父元素的高度塌陷为0。这时候我们可以使用CSS伪元素::after或::before来清除浮动，使父元素正常显示。

.clearfix::after {
content: "";
display: block;
clear: both;
}

上面的代码中，我们为需要清除浮动的父元素添加了一个clearfix类，并对其定制了一个::after伪元素，将其设置为块状元素并清除浮动，这样父元素就可以正常显示了。

当然，CSS伪元素还可以用来插入一些特殊的内容，比如箭头、图标或者边框等等。

.button::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
margin-right: 5px;
}

上面的代码中，我们为一个按钮元素添加了一个::before伪元素，并设置了它的内容为空，并将其设置为块状元素。接下来，我们设置了其宽度、高度以及背景色，并为其添加了一个右边距。这样就在按钮的前面插入了一个红色的小方块，起到了装饰的作用。

总之，CSS伪元素是一个非常方便的工具，可以大大提高开发效率，有大家在开发中可以尝试使用哦。