众所周知，CSS在页面美化中起着非常重要的作用。而CSS伪元素更是在设计中发挥着难以替代的作用，其中最常用的伪元素之一就是:after和:before。

在实际的页面设计中，我们经常需要在某个标签内部插入一个元素，比如一个箭头、一个icon等等，这时候我们就可以使用:before或:after来实现。

div{
position: relative;
}
div:before{
content: ""；
display: block;
position: absolute;
width: 10px;
height: 10px;
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在上述代码中，我们通过设置div为相对定位，再通过:before伪元素在div内部插入一个红色的块状元素。

同理，我们也可以使用:after伪元素来在元素内部插入内容。

p{
position: relative;
}
p:after{
content: "点我查看详情";
color: blue;
cursor: pointer;
position: absolute;
bottom: -20px;
right: 0;
}

在这个例子中，我们使用了:after伪元素在p标签内部插入了一段文字，并且设置了一些样式，让它显示在p标签的下方右侧。

终极提醒：当我们使用伪元素的时候，务必要设置content属性，否则它们将不会被显示。