伪类实现徽标

1、通常要弄徽标一般是弄成组件的形式,如果不需要太复杂的功能,那么用伪类实现更加方便

2、实现:

给需要添加徽标的button或者div、view等元素添加自定义属性data-count

<div :data-count='count'></div>

然后添加对应的类名,比如:count,之后利用css中的attr函数传值给伪类的content

.count{
  position: relative;
}
.count::before{
  position: absolute;
  right: 20rpx;
  top: -4rpx;
  content: attr(data-count);
  display: block;
  width: 26rpx;
  height: 26rpx;
  font-size: 20rpx;
  color: rgba(255,254,254,1);
  line-height: 26rpx;
  background: rgba(238,63,50,1);
  border-radius: 50%;
}

 

posted @ 2022-05-13 10:06  Pavetr  阅读(33)  评论(0)    收藏  举报