微信小程序——分割线中间带文字效果

微信小程序：分割线中间文字效果，这边直接贴代码和效果图，大家对号入座

.testClass{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass:before{
  content:""; 
  margin-right: 20rpx;
  height:1px; 
  border: none;
  border-top:1px dashed #1E90FF;
  flex: 1 1 0rpx;
}
.testClass::after{
  content:""; 
  margin-left: 20rpx;
  height:1px; 
  border: none;
  border-top:1px dashed #1E90FF;
  flex: 1 1 0rpx;
}


.testClass1{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass1:before{
  content:""; 
  margin-right: 20rpx;
  height:1px; 
  border: none;
  border-top:1px solid #000;
  flex: 1 1 0rpx;
}
.testClass1::after{
  content:""; 
  margin-left: 20rpx;
  height:1px; 
  border: none;
  border-top:1px solid #000;
  flex: 1 1 0rpx;
}



.testClass2{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass2:before{
  content:""; 
  margin-right: 20rpx;
  height:1px; 
  border: none;
  border-top:3px double #6B8E23;
  flex: 1 1 0rpx;
}
.testClass2::after{
  content:""; 
  margin-left: 20rpx;
  height:1px; 
  border: none;
  border-top:3px double #6B8E23;
  flex: 1 1 0rpx;
}




.testClass3{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass3:before{
  content:""; 
  margin-right: 20rpx;
  height:1px; 
  border: none;
  border-top:5px ridge #45D6D8;
  flex: 1 1 0rpx;
}
.testClass3::after{
  content:""; 
  margin-left: 20rpx;
  height: 1px;
  border: none;
  border-top:5px ridge #45D6D8;
  flex: 1 1 0rpx;
}

.testClass4{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass4:before{
  content:""; 
  margin-right: 20rpx;
  height: 1px;
  border: none;
  border-top:10px groove #FF8C00;
  flex: 1 1 0rpx;
}
.testClass4::after{
  content:""; 
  margin-left: 20rpx;
  height: 1px;
  border: none;
  border-top:10px groove #FF8C00;
  flex: 1 1 0rpx;
}

.testClass5{
  width:100%;
  margin-top: 100rpx;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.testClass5:before{
  content:""; 
  margin-right: 20rpx;
  height: 1px;
  border: none;
  border-top:10px dotted #FF8C00;
  flex: 1 1 0rpx;
}
.testClass5::after{
  content:""; 
  margin-left: 20rpx;
  height: 1px;
  border: none;
  border-top:10px dotted #FF8C00;
  flex: 1 1 0rpx;
}