线性渐变边框底部不起作用

Question

我使用以下代码为我的小部件标题下方的网站 (https://howtogetrippedathome.com/( 上的双下划线提供渐变颜色：

.widget-title:after {
    border-bottom: 6px double;
    -webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}

但是，当我应用此代码时，下划线消失了。我看过其他主题，这应该有效，但我不知道我做错了什么。

Answer 1

只需像这样使用多个渐变

h1{
  display:inline-block;
  padding-bottom:5px;
  background: 
   linear-gradient(to left,  red, blue),
   linear-gradient(to left,  red, blue); 
  background-size:100% 2px;
  background-position:bottom 0 left 0,bottom 5px left 0;
  background-repeat:no-repeat;
}

<h1>some text</h1>

Answer 2

而不是使用伪元素(：after(， 直接尝试此操作：

.widget-title {
    border-bottom: 6px double;
    -webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}

Answer 3

在 css3 中，请使用带有 ：：after 而不是 ：after 的伪元素。 并且请确保伪元素样式(如 (内容："((至少有一个空内容，并指定显示属性。

.widget-title {
  width: 100px;
  height: 100px;
}
.widget-title::after {
  content: "";
  display: block;
  background: #ffba10;
  border-bottom: 6px double;
}

上面的代码按预期工作。请参阅此链接以获取更多信息。