css伪元素after、before

最新推荐文章于 2023-04-28 17:04:00 发布

「已注销」

最新推荐文章于 2023-04-28 17:04:00 发布

阅读量1.3k

点赞数

文章标签：前端 css 伪类

本文链接：https://blog.youkuaiyun.com/kingAn123/article/details/89198425

版权

本文探讨了CSS伪元素`after`和`before`的概念与应用，包括如何利用它们添加文本、盒样式和图片。在实际使用中，文章提到了一些常见问题，如伪元素添加图片的大小调整、苹果端的兼容性问题以及动态改变图片等，并给出了相应的解决方案。同时，强调了解决问题时查阅官方文档的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此前，我使用伪类基本上只用到了:first-child和:last-child，来给遍历的列表标签去除最后一项的分割线和边距样式之类的。

因为我尽量避免使用浮动，所以也没有常使用伪类来去除浮动。

最近做一个头像列表的时候发现，用伪元素:after或者:before意外的好用。

效果如图：
在这里插入图片描述

文章目录

一、概念

简单来说，就是给当前的标签前后插入一个元素
元素包括：文本、盒样式、图片
常用属性包括：
- content（必填，即使为空字符串）
- 盒样式

二、应用

给第一项块元素里的图片div添加after伪元素，使用:nth-of-type(1)选择第一项(:first-child也行)
再对这一项，添加伪元素:after
设置好定位和背景颜色圆角居中，如下图

在这里插入图片描述

三、after、before的坑

1、伪元素添加图片

content属性，直接使用图片，即使写width,height也无法改变图片大小

解决方法：使用background:url()来添加图片
- 注意：此时content:''写成空，背景图片的宽高可以设置

/*伪元素添加图片：*/
.box:after{
  /*内容置为空*/
  content:"";
  /*设置背景图，并拉伸*/
  background:url()no-repeatcenter;
  /*必须设置此伪元素display*/
  display:inline-block;
  /*必须设置此伪元素大小（不会被图片撑开）*/
  background-size:100%;
  width:30px;
  height:30px;
}