:before 选择器在被选元素的内容前面插入内容，:after 选择器在被选元素的内容后面插入内容，都会使用 content 属性来指定要插入的内容。
有时候，项目中或多或少需要一些箭头，如果用图片来做，感觉就有点 low 了，而上面这两个选择器是最好的选择。效果如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .pre { position: relative; width: 30px; height: 30px; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; } .pre::before { content: ""; width: 10px; height: 10px; border: solid #fff; border-width: 2px 2px 0 0; transform: translate(-50%, -50%) rotate(-45deg); position: absolute; left: 50%; top: 70%; } .next { position: relative; width: 30px; height: 30px; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; } .next::before { content: ""; width: 10px; height: 10px; border: solid #fff; border-width: 0 0 2px 2px; transform: translate(-50%, -50%) rotate(-45deg); position: absolute; left: 50%; top: 70%; } .left { position: relative; width: 30px; height: 30px; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; } .left::before { content: ""; width: 10px; height: 10px; border: solid #fff; border-width: 2px 0 0 2px ; transform: translate(-50%, -50%) rotate(-45deg); position: absolute; left: 50%; top: 70%; } .right { position: relative; width: 30px; height: 30px; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; } .right::before { content: ""; width: 10px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0 ; transform: translate(-50%, -50%) rotate(-45deg); position: absolute; left: 50%; top: 70%; } </style> </head> <body> <p class="pre"></p> <p class="next"></p> <p class="left"></p> <p class="right"></p> </body> </html>
结果如下:
