伪类的使用

对于页面中总会出现 一些特别的元素，我们可以通过使用伪类来达到这样的效果。

1.某个元素的下划线，表示选择当前元素

HTML：

{{item.name}}

CSS:

.classify-item {
  display: inline-block;
  font-size: 28rpx;
  line-height: 72rpx;
  margin-right: 50rpx;
  position: relative
}
.header-classifys .classify-item.active {
  color: #D93432;
}
.header-classifys .classify-item.active:after{
  content: "";
  position: absolute;
  width: 50rpx;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-bottom: 2rpx solid #D93432;
  overflow: hidden;
}

2. 同样的，给元素前面或者后面有装饰元素

HTML:

  为你推荐

CSS:

.section-header {
  height: 84rpx;
  line-height: 84rpx;
}

.section-header text {
  font-size: 32rpx;
  position: relative
}

.section-header text:before, 
.section-header text:after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20rpx;
  height: 1rpx;
  border-bottom: 1rpx solid #000;
}
.section-header text:before {
  left: -30rpx; 
}
.section-header text:after {
  right: -30rpx; 
}

3.对于有些元素，存在大于或小于号那样的样式，我们也可以通过伪类来实现。通常‘我的’页面会出现这样的装饰。

HTML:

  
    
    {{item.title}}
  

CSS:

.user-item {
  display: flex;
  width: 100%;
  height: 94rpx;
  line-height: 94rpx;
  align-items: center;
  padding: 0 20rpx;
  margin-bottom: 2rpx;
  box-sizing: border-box;
  background-color: #fff;
}
.list-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
  border-radius: 50%;
}
.list-title {
  font-size: 28rpx;
  width: 100%;
  position: relative;
}
.list-title:after {
  content: '';
  position: absolute;
  top: calc(50% - 13rpx);
  right: 0; 
  width: 15rpx;
  height: 15rpx;
  border: 3rpx solid #999;
  opacity: 0.4;
  border-bottom: none;
  border-left: none;
  transform: rotate(45deg);
}