How to create a vertical line with CSS in Squarespace
Vertical lines are a great way to enhance the style and design of your website. You can use them to fill in the whitespace between paragraphs, as dividers, section transitions, and so much more. Squarespace has made adding horizontal lines to your website easy (just add a divider block in the drag-and-drop builder) — but what about vertical lines?
EXAMPLE OF A VERTICAL LINE:
All you need is a little bit of HTML/CSS… let’s get into it.
Step 01: add a code block
In the Squarespace drag-and-drop builder, add a code block element. In the code block, copy and paste the following HTML:
<div class="vertical-line"></div>
NOTE:
You can name the div class anything you want. In this example, we’re using “vertical-line”, but you could call it “vl”, “small-vertical-line”, “medium-vertical line” or “whateveryouwant”. It doesn’t matter what you call the div class. If you’d like to include multiple vertical lines with different styles to your website, create a unique div class name for each line style.
Step 02: use CSS to style your vertical line
Go to design > custom CSS
Copy and paste the following code:
// VERTICAL LINE
.vertical-line {
background: #00000;
width: 1px;
height: 150px;
margin: 0 auto;}
Let’s break this down:
.vertical-line → this is div name you chose for your vertical line (don’t forget the dot before the name)
background: #000000 → this indicated the color of the line, to change the color replace #000000 (black) with your color (HEX code) of choice
width: 1px → this is the thickness of the vertical line, if you want a heavier line update this to 4px or something similar
height: 150px → this is the height of the vertical line, to make the line shorter insert a smaller number and a larger number to make it longer
margin: 0 auto → margins are used to create space around elements (we recommend leaving this as is)
You can preview the changes to the vertical line as you update your CSS. Once you’re done updating the code, make sure to hit save.
