使用 CSS 的 :before 和 :after 选择器做箭头样式
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
: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>结果如下:
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
