css伪元素::before和::after用法案例

::befrore 和::after伪元素分别表示元素内容的【前】【后】，利用这两个伪元素可以在元素内容的前后添加内容.其实没有什么前后的概念，如果应用了 absolute 的特性之后，可以把这些伪元素放在任何位置。

下面通过几个案例来学习如何使用这两个伪元素，下面的预览效果是真实渲染出来的，提供了相应的html和css代码。

1 对a标签加上特定的符号

效果预览：

html：

        <a>这是一个链接</a>

css：

a {
  position: relative;
  display: inline-block;
  outline: none;
  text-decoration: none;
  color: #000;
  font-size: 32px;
  padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }

2 表格选区

鼠标防止于某个内容区，会自动将横行和纵行显示为淡蓝色。
效果预览

html

<table border="1">
  <tr>
    <th>
      表头1
    </th>
    <th>
      表头2
    </th>
  </tr>
  <tr>
    <td>
      表内容1
    </td>
    <td>
      表内容2
    </td>
  </tr>
  <tr>
    <td>
      表内容1
    </td>
    <td>
      表内容2
    </td>
  </tr>
</table>

css

table{overflow: hidden;}
td, th{
  padding: 10px;
  position: relative;
  outline: 0;
  cursor: pointer;
}
td:hover::after,
th:hover::after {
  content: '';
  background-color: lightblue;
  position: absolute;
  left: 0;
  height: 10000px;
  top: -5000px;
  width: 100%;
  z-index: -1;
}

td:hover::before {
  background-color: lightblue;
  content: '';
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;
  width: 10000px;
  z-index: -1;
}

3 图片说明

效果预览

html：

<div class="empty__bg"></div>

css

.empty__bg {
  display: inline-block;
  width: 95px;
  height: 92px;
  background: url(https://jiaruiblog.com/images/avatar.png) no-repeat;
  background-size: 95px 92px;
  position: relative;
  margin-bottom: 16px;/*注意这里需要留好位置放置after元素（它是absolute进去的）*/
}
.empty__bg:after {
  content: "暂无学习计划";
  display: block;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  width: 100%;
  color: #909090;
  position: absolute;
  top: 100%;
  left: 0;
}

4.视频播放图标

<div class="play-cover">
</div>

.play-cover {position: relative}
.play-cover:before{
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: -4px;
  left: -12px;
  border-left: 9px solid white;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 12px;
  margin-bottom: 7px;
  z-index: 5;
}
.play-cover:after{
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -10px;
  top: -10px;
  border: 2px solid white;
  background: rgba(0, 0, 0, .6);
  border-radius: 12px;
  background-clip: padding-box;
}

5.美化多选框

效果预览：

html

      <input type="checkbox" id="checkbox" class="magic-checkbox">
      <label for="checkbox">多选框</label>

css

.magic-checkbox {
  position: absolute;
  display: none; /*先隐藏真正的checkboxbox*/

}
.magic-checkbox + label {
  /*为与checkbox搭配的label使用样式*/
  position: relative;/*相对定位，方便其内容的伪元素进行定位*/
  display: block;/*块元素*/
  padding-left: 30px;
  cursor: pointer;
  vertical-align: middle;
}

.magic-checkbox + label:before {
  /*label添加:before伪元素，用于生成一个带边界的正方形，模拟复选框的轮廓*/
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '';
  border: 1px solid #c0c0c0;
  border-radius: 3px;
}
  /*为checkbox添加:after伪元素，作用是生成一个√图形，模拟checkbox选中状态，未选中状态下会被隐藏*/
  .magic-checkbox + label:after {
    top: 2px;
    left: 7px;
    box-sizing: border-box;
    width: 6px;
    /*//实现√图形很简单：设置一个长方形，去掉其上边界和左边界，剩下的2个边界旋转45度就得到√形状*/
    height: 12px;
    transform: rotate(45deg);
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    border-top: 0;
    border-left: 0;
    position: absolute;
    display: none;
    /*//√形状先隐藏*/
    content: '';
  }
  /*单击label，隐藏的checkbox为checked状态，这时设置checked状态下搭配label的:before伪元素背景和边界颜色*/
  .magic-checkbox:checked + label:before {
    animation-name: none;
    border: #3e97eb;
    background: #3e97eb;
  }
  /*checked状态的checkbox搭配的label伪元素:after此时设置显示，那么√就显示出来了*/
  .magic-checkbox:checked + label:after {
    display: block;
  }

参考案例：

参考资料

css伪元素:before和:after用法详解 http://www.cnblogs.com/wonyun/p/5807191.html
扩大可点区域http://www.alloyteam.com/2015/04/beforeafter%E4%BC%AA%E5%85%83%E7%B4%A0%E5%A6%99%E7%94%A8/
最简洁的代码美化复选框、单选框和滑动按钮http://segmentfault.com/a/1190000012407216

如果您觉得上面的内容对您有帮助欢迎点赞、评论、转发！
更多内容请查阅作者博客：https://jiaruiblog.com
或者star作者github: https://github.com/Jarrettluo?tab=repositories