css - 为文本制作带有渐变的底部边框

Question

我正在尝试制作一个带有渐变的边框底部，我试过这个:

h2{
    color: #16DB00;
    text-align: left;
    border-bottom: 1px solid #FF00C9;
    border-bottom-color: -webkit-linear-gradient(left, rgba(255,0,200,1) 0%, rgba(255,0,200,0) 100%);
}

这就是我的目标:

what I want

它淡入 0% alpha 而不是黑色

Answer 1

body {
  background-color: black;
}

h2 {
  color: #16DB00;
  text-align: left;
  position: relative;
  text-transform: uppercase;
}

h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 0, 200, 1), rgba(255, 0, 200, 0));
}

<h2>test</h2>