伪元素::after与::before的使用注意事项

前言

作为一个前端，这也算是必修之一了吧

例子

如果想要做成一个这样的平行四边形，可以用canvas，也可以用svg，当然也能用伪元素来实现，本篇

主要说伪元素

遇到的坑

用伪元素来做遇到几个问题

1.写了一串css，发现 ::after 与 ::before 元素显示不出来，这个十有八九没在 css 里添加 content:" "

2.元素乱跑，不在div前后，这个好像只能加 position:absolute/relative , top:x, left:x 等属性去调

3.不能理解 border ，border这个东西实际上是有个中心点的，一整块border图形是以四个三角形组成的，大概就只能多练去熟悉了

4.我要改背景颜色的动作效果，使用 :hover::after 和 :hover::before

后语

总的来说，这个这两个伪元素作用非常大，很多酷炫的动态效果都可以通过这两个元素去实现，就看自己的脑洞了