用文本渐变制成底边框

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>

Answer 2

是否需要支持IE9-10，:: after Pseudo类允许使用其他元素进行样式设置。 Here's an example。

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

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