0

I'm trying to create double stripes/lines on the side of my heading, but couldn't figure out. Here's what I have so far:

This is what I have so far:

single line on each side of title

My aim is to achieve double line instead of single.

.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>
web-tiki
  • 92,319
  • 29
  • 210
  • 241
rory-h
  • 610
  • 1
  • 10
  • 27

1 Answers1

4

Instead of a gradient, use a border (or two).

.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;
}
<h2 class="section-heading" style="text-align: center;"><span style="color: #ff8916;">THE WISHLIST</span></h2>
Paulie_D
  • 102,164
  • 10
  • 117
  • 144