对before和after这 两个伪类的理解

昨天在工作的时候，遇到了一个问题，如图所示

看到红色标记了没，当时 打算直接让UI设计师切一条线给我，然后我直接定位到页面上的，后来同事跟我说可以用after和before这两个伪类，当时我就不是特别明白，后来回去查了一下资料，实现了图片的样式。

在这里，我想记录一下自己对after和after这两个伪类的理解：
《1》明白它们其实是两个内联元素，即没有高度和宽度；
《2》既然是内联元素，当使用它们的时候，那就分别位于元素的前后位置；
《3》用法：

最后在结束的位置，附上我的代码，

记下此文，希望可以方便自己以后查找相关知识。