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

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 >Products</h1>

CodePudding user response：

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>

CodePudding user response：

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

.h1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.h1:before,
.h1:after {
  content: '';
  width: 100px;
  height: 10px;
  margin: 0 10px;
  background: linear-gradient( 
    0deg, 
    #fff 0%, #fff 40%, 
    #aaa 40%, #aaa 60%, 
    #fff 60%, #fff 100%
  );
}

.h1:before {
  border-right: 10px solid darkorange;
}

.h1:after {
  border-left: 10px solid darkorange;
}

<h1 >Products</h1>

CodePudding user response：

PS: I had to use FontAwesome icon to simulate the boxes

.h1::before,
.h1::after {
  display: flex;
  content: "\f04d";
  font-family: FontAwesome;
  width: 4rem;
  margin: 0 1rem;
  height: 0.1rem;
  background: black;
  box-sizing: border-box;
  align-items: center;
  font-size: 10px;
  color: gold;
}

.h1::before {
  justify-content: flex-end;
}

.h1::after {
  justify-content: flex-start;
}

.h1 {
  display: flex;
  align-items: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<h1 >Products</h1>