Линейный градиент для ссылок

Question

Я пытаюсь сделать ссылку подчеркивающей линейный градиент, как показано ниже.

К сожалению, здесь не отображаются цвета.Проблема в том, что в моем браузере я вижу только один цвет, первый градиент ... В чем проблема для второго?Неправильный подход, чтобы сделать этот градиент подчеркивания?

a {  
    background-image: linear-gradient(to right, rgba(57, 72, 255, 1) 100%, rgba(57,     213, 255, 1) 100%);
    background-repeat: repeat-x;
    background-size: 4px 4px;
    background-position: 0 22px;
  }
  
  a:visited {  color: #2a2a2a;
}

<a href=""> <p> Lorem Ipsum </p> </a>

Хорошо, разобрался.Если кому-то еще интересно, в чем проблема: Вы должны установить размер фона auto.

Answer 1

Вы можете попробовать этот простой трюк, чтобы настроить градиентную линию, чтобы ссылка подчеркивала линейный градиент, как показано ниже

CSS

body {
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
}

a {
  color: #a0a0a0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 28px;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 0 3px 5px;
  overflow: hidden;
  background-image: linear-gradient(to right,#a859ff,#6d0cc5 ,#3422c5,#0043ff,#0a6bfd,#00c4ff,#14e9ff);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position-y: bottom;
}

 <a href="#">Gradient Link</a>

Answer 2

a {  
    background: linear-gradient(to right, 
    rgba(57, 72, 255, 1), 
    rgba(57, 213, 255, 1)
    );
    background-position: bottom;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    text-decoration: none;
  }
  

<a href="#">  Lorem Ipsum  </a>

• ширина фона должна составлять 100% ширины,
• расположена внизу,
• и нет-повторение.

Кроме того, я был удален подчеркиванием по умолчанию.