сделать нижнюю границу с градиентом для текста - PullRequest
Новая
       5

сделать нижнюю границу с градиентом для текста

0 голосов
/ 31 октября 2018

Я пытаюсь сделать бордюр с градиентом для, и я попробовал это: 

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%);
}

и вот к чему я стремлюсь:

что я хочу

Он превращается в 0% альфа, а не в черный цвет

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Если вам требуется поддержка IE9-10, псевдо-класс :: after позволяет использовать другой элемент для стилизации. Вот пример . 

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%);
}
0 голосов
/ 31 октября 2018 

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>
...