纯css实现关闭按钮

问题背景：
做一个提示弹窗。设计图上面有一个x的关闭按钮，在图标库没找到合适的，开始为了偷懒用的字母x，后来ui说看起来怪怪的。没办法只有根据设计图一比一的画一个。

实现：
采用::after和 ::before 伪元素。
这里穿插一个小知识点

伪元素：是在内容元素前后插入一个额外的元素。这些元素在文档源中不可见，但是在显示中可见。
伪类：比如hover 等特殊交互行为

dom结构：

    

        
 content 
        

        

            

        
    

样式：

最终效果：