html - 如何在标题中使褪色的线条 react 灵敏？

我的标题中有这样一行
Faded line。
标题较长时，行会变短，并且褪色效果会消失
Faded line2
我在h1中使用此css行

.sub_title h1:before {
    content: "";
    width: 42%;
    position: absolute;
    top: 45%;
    bottom: 0;
    overflow: hidden;
    margin-left: -43.6%;
    text-align: right;
    height: 2px;
    background: -webkit-gradient(radial, 60% 0%, 0, 239% 90%, 1090, from(#5CAECE), to(#fff));
}
.sub_title h1:after {
    content: "";
    width: 42%;
    position: absolute;
    top: 45%;
    bottom: 0;
    overflow: hidden;
    text-align: right;
    height: 2px;
    margin-left: 1.5%;
    background: -webkit-gradient(radial, 60% 0%, 0, -139% 90%, 1090, from(#5CAECE), to(#fff));
}

无论如何，这条线会有所响应，以便无论倾斜度有多长，线都会变短，但会保持褪色效果？

最佳答案

有几种解决方案，但是对我来说最安全，最简单的方法是使用flexbox，语义清晰，没有任何其他膨胀，并且我认为工作正常：https://jsfiddle.net/prowseed/szgeag97/

整个魔术都在于特定的flexbox功能：

.title {
  text-align:center;
  display:flex;
  align-items:center;

  &:before, &:after {
    content:'';
    flex: 2 1 90px;
    background:linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 60%);
    height:4px;
  }

  &:after {
    background:linear-gradient(to left, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 60%);
  }

  h1 {
    flex:0 1 auto;
    padding:0 5px;
  }
}