css伪元素选择器before 和 after 的使用

css伪元素选择器before 和 after 的使用

前言:最近收集了一些关于before 和 after 的使用，汇总了一下，不全面，但是，希望便于以后自己查看。

:before 的作用:在子元素的最前面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容，但是通常为空字符串。
:after 的作用: 在子元素的最后面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容，但是通常为空字符串。

before 和 after 使用注意点:
1. 必须设置 content
2. 默认是行内元素
如果要设置大小, 需要转换显示模式
display: block/inline-block;
或者定位position: absolute/fixed;
3. before 和 after 都是伪元素, 不是真实存在的元素, 不能添加 hover,
且 不能通过 js 进行获取

before 和 after 的使用场景:
1. 清除浮动
2. 添加遮罩层 或者 添加小图标

1.清除浮动

.clearfix:after {
  content: "";
  display: block;
  /* 清除浮动元素造成的影响 */
  clear: both; 
  height: 0;
  line-height: 0;
  visibility: hidden;
}

2.添加小图标

css代码

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 }
  ul {
     width: 400px;
     height: 50px;
     border: 1px solid #000;
     margin: 150px auto ;
     text-align: center;
 }
  ul li {
     width: 25% ;
     height: 50px;
     list-style: none ;
     border: 1px solid #000;
     text-decoration: none ;
     float: left;
     line-height: 50px;
     position: relative;
 }
  .new:before {
     content: '' ;
     width: 36px;
     height: 23px;
     position: absolute ;
     top:0px ;
     right: 0px;
     background-image: url('./images/icon.png');
 }
</style>

效果