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
  • 99,765
  • 32
  • 217
  • 249
rory-h
  • 660
  • 1
  • 12
  • 30

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
  • 107,962
  • 13
  • 142
  • 161