The Best Way to Add an Underline to Headings in Squarespace

In this Squarespace tutorial I show you how to add underline decorations to your Squarespace websites as well as how to automate the CSS to update the line position based on text alignment.

Perfect for when you will be handing the site off to a client.

Adding Underlines to Headings in Squarespace

Custom CSS:

h2 {
  position: relative;

&:after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 65px;
    left: 0;
    background: #000;
    -webkit-transform: translateY(15px);
       -ms-transform: translateY(15px);
           transform: translateY(15px);
}
&[style*="text-align: center"]:after {
    margin: 0 auto;
    right: 0;
}

&[style*="text-align: right"]:after {
    right: 0;
    left: auto;
}
}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris