How to display a horizontal line with squares before and after a title in css

Question

I'm trying to figure out how to display a horizontal line with a small square on each side of an h1 title. Here is an example of what I'm trying to do. I found a similar question and using that code I can get the horizontal line, but can't figure out how to add the square.

Here's the current css.

.h1::before,
.h1::after {
  display: inline-block;
  content: "";
  border-top: .3rem solid black;
  width: 4rem;
  margin: 0 1rem;
  transform: translateY(-0.3rem);
}

<h1 class="h1">Products</h1>

Answer 1

I will reuse my old answer and add the boxes with gradients:

h2 {
  display:table; /* fit content width*/
  margin:20px auto; /* center*/
  padding:0 20px; /* control the space between the text and the line */
  box-shadow:0 0 0 100px red; /* control the line length and color here */
  --s:2px; /* control the line thickness*/
  clip-path:
    polygon(0 0,100% 0,
        99%     calc(50% - var(--s)/2),
        200vmax calc(50% - var(--s)/2), 
        200vmax calc(50% + var(--s)/2),
        99%     calc(50% + var(--s)/2),
      100% 100%,0 100%,
        1px     calc(50% + var(--s)/2),
       -200vmax calc(50% + var(--s)/2),
       -200vmax calc(50% - var(--s)/2),
        1px     calc(50% - var(--s)/2));
   --g:no-repeat linear-gradient(blue 0 0); /* color of square here */
   background:var(--g) left,var(--g) right;
   background-size: 10px 10px; /* size of the sqaure*/
}

body {
  background: pink;
}

<h2>Products</h2>

Answer 2

Here's a combination of a vertical gradient and side border.

.h1 {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
}

.h1:before,
.h1:after {
  content: '';
  width: 100px;
  height: 10px; /* square height - match widths below */
  margin: 0 10px; /* space against text */
  background: linear-gradient( 
    0deg, 
    #fff 0%, #fff 40%, /* top */
    #aaa 40%, #aaa 60%, /* middle - 20% of 10px is 2px */
    #fff 60%, #fff 100% /* bottom */
  );
}

.h1:before {
  border-right: 10px solid darkorange; /* square width - match height above */
}

.h1:after {
  border-left: 10px solid darkorange; /* square width - match height above */
}

<h1 class="h1">Products</h1>