使用伪类快速定位一个图标

最新推荐文章于 2023-06-28 18:43:17 发布

原创最新推荐文章于 2023-06-28 18:43:17 发布 · 319 阅读

1 ·

CC 4.0 BY-SA版权

cyh的前端学习之路专栏收录该内容

40 篇文章

订阅专栏

本文详细解析了CSS中li元素的样式设置，包括高度、字体大小、内边距、边框等属性，并深入探讨了伪类:before的使用，如何通过content属性结合display:block展示背景图片，以及不同类别的背景图片应用。

.items li{
  height: 1.2rem;
  font-size: .373333rem;
  position: relative;
  padding-left: .693333rem;
  margin-left: .4rem;
  border-bottom: .026667rem solid #e4e4e4;
  line-height: 1.2rem;
}
.items li::before{
  content: '';
  display: block;
  width: .426667rem;
  height: .426667rem;
  position: absolute;
  left: .026667rem;
  top: .346667rem;
  background-size: cover;
}
.address::before{
  background-image: url('./img/address.png');
}
.money::before{
  background-image: url('./img/money.png');
}
.email::before{
  background-image: url('./img/email.png');
}
.question::before{
  background-image: url('./img/question.png');
}

li是长条格子，她的position必须是relative，因为下面的伪类是以向上第一个position为relative的父元素来定义自己的absolute定位的，li：：before里的是公用的，下面的address之类为不同的图片，但和上面的伪类指的是同一个元素，注意伪类一定要有content属性，然后这里我们用了display：block因为里面是一张图片
在这里插入图片描述