标题两侧的线条

Question

我正试图在我的标题一侧创建双条纹/线条，但无法弄明白。这是我到目前为止所做的：

这是我到目前为止所做的：

我的目标是实现双线而不是单线。

.section-heading {
  display: table;
  white-space: nowrap;
}
.section-heading:before {
  background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}
.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

<h2 class="section-heading" style="text-align: center;"><span style="color: #ff8916;">THE WISHLIST</span></h2>

Answer 1

使用边框（或两个）而不是渐变。

＆＃13;

＆＃13;

.section-heading {
  display: flex;
  align-items: center;
}
.section-heading::after,
.section-heading::before {
  content: " ";
  flex: 1;
  height: 7px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
span {
  margin: 0 1em;
}

＆＃13;

<h2 class="section-heading" style="text-align: center;"><span style="color: #ff8916;">THE WISHLIST</span></h2>

＆＃13;

＆＃13;

＆＃13;