Guide to creating a CSS horizontal line with square elements on either side of a title

Question

Guide to creating a CSS horizontal line with square elements on either side of a title

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>

html css

Answer 1

Answer №1

Check out this unique combination featuring 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">Discover</h1>

Answer 2

Check out this unique combination featuring 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">Discover</h1>

Answer 3

Answer №2

For this solution, I am going to repurpose an older response and incorporate gradient-filled boxes:

h2 {
  display:table; /* adjusting content width*/
  margin:20px auto; /* centering */
  padding:0 20px; /* managing space between text and line */
  box-shadow:0 0 0 100px red; /* defining line length and color */
  --s:2px; /* setting 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); /* square color */
   background:var(--g) left,var(--g) right;
   background-size: 10px 10px; /* size of the sqaure*/
}

body {
  background: pink;
}

<h2>Products</h2>

Answer 4

For this solution, I am going to repurpose an older response and incorporate gradient-filled boxes:

h2 {
  display:table; /* adjusting content width*/
  margin:20px auto; /* centering */
  padding:0 20px; /* managing space between text and line */
  box-shadow:0 0 0 100px red; /* defining line length and color */
  --s:2px; /* setting 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); /* square color */
   background:var(--g) left,var(--g) right;
   background-size: 10px 10px; /* size of the sqaure*/
}

body {
  background: pink;
}

<h2>Products</h2>

Guide to creating a CSS horizontal line with square elements on either side of a title

Answer №1

Answer №2

Similar questions

Connect jQuery's resizable controls

The information about the property is not appearing on the screen

Removing CSS from an HTML document using Gulp

The use of event.returnValue is outdated and no longer supported. It is recommended to use the standard event.preventDefault() method instead. You may encounter

Having trouble scrolling to the top in Flickr Search using AngularJS, the results are restricting my movement

Activate the button when the password is correct

Tips for shuffling the sequence of EJS variables

How can I validate HTML input elements within a DIV (a visible wizard step) situated within a FORM?

I am trying to center align this image, but for some reason, it's not cooperating

Guide to positioning an icon at the center of a material card

Creating unique image control buttons for each image within a div using a combination of CSS and JavaScript

Using AngularJS to handle error validation for dropdowns and select elements that will redirect using the ng

Sliding the container with a width adjustment and left margin fails to display all images

The Data from Req.Body Doesn't Appear After Adding Form Fields

Unable to successfully submit a request for login information using an AJAX call

Horizontal scrollbar displayed by CSS Bootstrap

What is the best way to shorten a string with jquery?

Linked selection options for state, city, and postal code

Preserve user-inputted text from jQuery within a div container

Ways to broaden the map of a variable in SCSS