使用 CSS 的 :before 和 :after 选择器做箭头样式-CFANZ编程社区

使用 CSS 的 :before 和 :after 选择器做箭头样式

: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>

结果如下:

使用 CSS 的 :before 和 :after 选择器做箭头样式_前端

0 条评论