I am currently working on how to create a horizontal line with small squares on each side of an h1 title. I have managed to achieve the horizontal line using code from a similar question, but I am struggling to add the square elements to the design.
https://i.stack.imgur.com/zjGcP.png
Below is the current CSS code snippet.
.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>