CSS vertical bars
CSS Vertical Rule
In web design, vertical rules are often used to separate content or for decoration. CSS provides a variety of ways to achieve the vertical line effect, which can be achieved through borders, pseudo-elements, background https://coder-cafe.com/wp-content/uploads/2025/09/images, etc. This article will introduce in detail several common methods to achieve CSS vertical line effect.
Using Borders to Create Vertical Lines
The simplest way to create a vertical line effect is to use a border. You can simulate the vertical line effect by adding a left or right border to an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Vertical Line</title>
<style>
.vertical-line {
height: 100px;
border-left: 1px solid black;
}
</style>
</head>
<body>
<div class="vertical-line"></div>
</body>
</html>
In the example above, we add a left border to a div element to create a vertical line. You can change the style and width of the vertical line by adjusting the border element.
Using Pseudo-Elements to Create Vertical Lines
Another common method is to use pseudo-elements to create vertical lines. This method is more flexible and allows you to create vertical lines without adding unnecessary HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS vertical bar</title>
<style>
.vertical-line::before {
content: '';
display: block;
width: 1px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<div class="vertical-line"></div>
</body>
</html>
In the above example, we use ::before Use a pseudo-element to create an element with a vertical line effect. Setting the content to empty makes the pseudo-element visible. You can adjust the width and color of the vertical line by adjusting the width and background .
Using a Background Image to Create Vertical Lines
In addition to the two methods above, you can also use a background image to create a vertical line effect. This method allows for more complex vertical line styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Vertical Line</title>
<style>
.vertical-line {
height: 100px;
background: url('vertical-line.png') repeat-y;
}
</style>
</head>
<body>
<div class="vertical-line"></div>
</body>
</html>
In the example above, we create a vertical line effect by setting the background property to a vertically repeating background image. You can create different styles of vertical lines by changing the background image.
In summary, these are several common ways to achieve vertical line effects with CSS. In actual projects, you can choose the appropriate method to achieve different styles of vertical lines based on your specific needs.