How to create a vertical dividing line in CSS
How to Create a Vertical Divider in CSS
In web design, dividers are often used to enhance the aesthetics and structure of a page. In addition to horizontal dividers, vertical dividers are also a common design element. This article will explain how to create a vertical divider using CSS.
1. Using the border property
The simplest method is to use the border property to create a vertical divider. By setting the border-left or border-right property, you can achieve different styles of vertical dividing lines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
<style>
.divider {
height: 200px;
border-left: 1px solid black;
}
</style>
</head>
<body>
<div class="divider"></div>
</body>
</html>
Output:
In the example above, we created a 200px-high div element and set the border-left property to a 1px solid black border, creating a vertical divider.
2. Using the ::before and ::after Pseudo-Elements
Another common method is to use the ::before and ::after pseudo-elements to create a vertical divider. By styling these pseudo-elements, you can achieve more flexible divider effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
<style>
.divider {
height: 200px;
position: relative;
}
.divider::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: black;
} </style>
</head>
<body>
<div class="divider"></div>
</body>
</html>
Output:
In the example above, we create a div element with a height of 200px and use the ::before pseudo-element to create a vertical divider. By setting the pseudo-element’s position property to absolute and adjusting the values of the top and left properties, the vertical divider can be placed in the middle of the div element.
3. Using flex layout
Using flex layout is also a common method to achieve a vertical divider. By setting the display: flex and justify-content: center properties, you can easily achieve the effect of a vertical dividing line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
<style>
.container {
display: flex;
justify-content: center;
}
.divider {
height: 200px;
width: 1px;
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="divider"></div> </div>
</body>
</html>
Output:
In the above example, we create a container and set it to flex layout. We then place a div element with a height of 200px and a width of 1px within the container. Using the justify-content: center property, we position the vertical divider in the center of the container.
4. Using a background image
In addition to the above methods, you can also use a background image to create a vertical divider. By setting the background-image property, you can use a background image as a vertical dividing line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
<style>
.divider {
height: 200px;
background-image: url('vertical-line.png');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="divider"></div>
</body>
</html>
Output:
In the example above, we create a 200px-high div element and set the background image vertical-line.png as the vertical divider. By setting the background-repeat: repeat-y property, the background image repeats vertically, creating a divider effect.
5. Using the :after pseudo-class
Another common method is to use the :after pseudo-class to create a vertical divider. By styling this pseudo-class, you can achieve a more flexible divider effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
<style>
.divider {
height: 200px;
position: relative;
}
.divider:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background-color: black;
} </style>
</head>
<body>
<div class="divider"></div>
</body>
</html>
Output:
In the example above, we create a div element with a height of 200px and use the :after pseudo-class to create a vertical divider. By setting the position property of the div pseudo-class to absolute and adjusting the values of the top and right properties, you can position the vertical divider on the right side of the div element.
6. Using Flex Layout and Pseudo-Elements
Combining Flex Layout with pseudo-elements is another common method for creating vertical dividers. By setting display: flex and the ::before pseudo-element, you can achieve a more flexible divider effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
<style>
.container {
display: flex;
justify-content: center;
position: relative;
}
.divider {
height: 200px;
width: 1px;
background-color: black;
}
.divider::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="divider"></div>
</div>
</body>
</html>
Output:
In the example above, we create a container container and set it to flex layout. Then, place a 200px-high, 1px-wide div element within the container as a vertical divider. Use the ::before pseudo-element to create another vertical divider, creating a double vertical divider effect.
7. Using Grid Layout
In addition to flex layout, you can also use grid layout to create vertical dividers. By setting the display: grid and grid-template-columns properties, you can easily achieve a vertical divider effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1px 1fr;
justify-content: center;
}
.divider {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="divider"></div>
</div>
</body>
</html>
Output:
In the example above, we create a container container and set it to a grid layout. By setting the grid-template-columns property to 1fr 1px 1fr, we create two vertical dividers within the container, thus achieving a dividing line effect.
8. Using SVG
Another way to create a vertical divider is to use SVG. By creating an SVG element and setting the attributes of its <line> tag, you can implement a custom vertical dividing line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
</head>
<body>
<svg height="200" width="1">
<line x1="0" y1="0" x2="0" y2="200" style="stroke:black;stroke-width:1" />
</svg>
</body>
</html>
Output:
In the above example, we created an SVG element and used the <line> tag to draw a vertical divider. By setting the x1, y1, x2, and y2 properties, we can adjust the position and style of the divider.
9. Using CSS Gradients
Using CSS gradients is another way to create a vertical divider. By setting the background-image property to a linear gradient, you can create a vertical divider in various styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
<style>
.divider {
height: 200px;
background-image: linear-gradient(to right, black 1px, transparent 1px);
}
</style>
</head>
<body>
<div class="divider"></div>
</body>
</html>
Output:
In the example above, we created a 200px-high div element and set its background image to a linear gradient. By configuring the gradient direction and color, you can create different vertical divider effects.
10. Using CSS Variables
The final method is to use CSS variables to create a vertical divider. By defining variables and referencing them in your styles, you can create flexible divider effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Divider</title>
<style>
:root {
--divider-color: black;
--divider-width: 1px;
}
.divider {
height: 200px;
border-left: var(--divider-width) solid var(--divider-color);
}
</style>
</head>
<body>
<div class="divider"></div>
</body>
</html>
Output:
In the example above, we define two CSS variables, --divider-color and --divider-width, and reference them in the div element’s style sheet to create a vertical divider with a custom color and width.