伪类的使用

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

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

HTML：

<view
  wx:for="{{categories}}"
  wx:key="{{index}}"
  data-id="{{index}}"
  bindtap="tabtap"
  class="classify-item {{tabIndex == index ? 'active':''}}"
>
  {{item.name}}
</view>

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:

<view class='section-header'>
  <text>为你推荐</text>
</view>

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:

<block wx:for="{{list}}" wx:key="{{index}}">
  <view class='user-item'>
    <image src='{{item.img}}' class='list-icon'></image>
    <view class='list-title'>{{item.title}}</view>
  </view>
</block>

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);
}

进阶版：除了上述描边，然后旋转 45 度之后，形成描边三角形之外，还可以用下面的方法。

效果图如下：

.tri_top:before{
    content: "";
    width: 0px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #000000;
    position: absolute;
    top: -15px;
    left: 65px;
}
.tri_top:after{
    content: "";
    width: 0px;
    height: 0px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #FFFFFF;
    position: absolute;
    top: -14px;
    left: 66px;
}

在 before 中，使用黑色进行绘制三角形，然后再 after 中使用 白色设置三角形，同时将两个三角形重叠着（中间差 1px），绘制的三角形也是相差 1px。白色三角形遮盖不住黑色三角形时，就会露出一个描边三角形。

4.伪类实现三角形

效果图如下：

.tri_top:before{
  content: "";
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #CCCCCC;
  position: absolute;
  top: -10px;
  left: 65px;
}

伪类样式设置 width、height 都是 0px，content 为空字符串；首先 border-bottom 进行描边，对于的 border-left 和 border-right 使用 transparent 指定透明色彩。上面代码是第一个图的案例，同样的如果你想制作其他角度的三角形，只需要设置对应的 border 属性即可。

进阶版：如果想要设置直角三角形的话，我们如何制作呢？

效果图如下：

.triangle-topleft:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 100px solid #CCCCCC;
  border-right: 100px solid transparent;
  /* border-left: 100px solid #CCCCCC;
  border-bottom: 100px solid transparent; */
  position: absolute;
  top: -10px;
  left: 65px;
}

跟上述三角形不同的是，直角三角形只需要设置 border 的两边属性，top / bottom 和 left / right 中分别组合。我们可以看的设置直角在左上角的直角三角形，首先 border-top 进行描边，然后右下角的直角去掉，即设置 border-right 属性使用 transparent 指定透明色彩。当然用注释的那种写法，也能达到同样的效果。