526互联

css渐变背景条纹且不占全部高度

发布时间 2023-08-10 13:07:50作者: Li_pk

1. 效果

image

2. 实现

.title {
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #263a5c;
  line-height: 21px;
  transform-style: preserve-3d;
}
.title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, #4589ff 100%);
  transform: translateZ(-1px);
}