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

最新推荐文章于 2023-06-23 22:22:59 发布

weixin_33901926

最新推荐文章于 2023-06-23 22:22:59 发布

阅读量736

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c5a943ee51d457faa4b46e8

本文详细解析了CSS伪元素:before与:after的作用及使用技巧，包括清除浮动、添加图标等应用场景，并强调了使用时需注意的细节，如必须设置content属性，以及如何通过display或position属性来调整伪元素的大小和位置。

: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>
复制代码

效果

转载于:https://juejin.im/post/5c5a943ee51d457faa4b46e8