Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to make horizontal line with words in the middle using CSS?
With CSS, we can create horizontal lines with content in the middle using various techniques. This design pattern is commonly used for section dividers, decorative headings, and visual separators in web layouts. We can place text, headings, or even images between horizontal lines for an elegant visual effect.
Syntax
The most common approach uses CSS flexbox with pseudo-elements ::before and ::after
.element {
display: flex;
flex-direction: row;
}
.element::before,
.element::after {
content: "";
flex: 1 1;
border-bottom: 1px solid color;
margin: auto;
}
Using Flexbox with Text
The flexbox method creates flexible horizontal lines that automatically adjust to the content width. The ::before and ::after pseudo-elements generate the lines, while flex: 1 1 makes them expand equally on both sides.
Example
Following example creates a horizontal line with text in the middle using flexbox
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line with Text</title>
<style>
.divider-text {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
margin: 20px 0;
font-family: Arial, sans-serif;
font-size: 18px;
color: #333;
}
.divider-text::before,
.divider-text::after {
content: "";
flex: 1 1;
border-bottom: 2px solid #007bff;
margin: 0 15px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Welcome to Our Website</h2>
<p class="divider-text">Featured Content</p>
<p>This is some content below the decorative divider.</p>
</body>
</html>
The output shows text centered between two horizontal blue lines
Welcome to Our Website ????????????? Featured Content ????????????? This is some content below the decorative divider.
Using Flexbox with Headings
Headings can also be styled with horizontal lines for section separators. This technique is particularly useful for creating visually appealing section breaks in articles or pages.
Example
Following example creates a horizontal line with a heading in the middle
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line with Heading</title>
<style>
.divider-heading {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
margin: 30px 0;
font-size: 24px;
font-weight: bold;
color: #2c3e50;
}
.divider-heading::before,
.divider-heading::after {
content: "";
flex: 1 1;
border-bottom: 3px solid #e74c3c;
margin: 0 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Some introductory content here.</p>
<h2 class="divider-heading">Our Services</h2>
<p>Content about services follows the decorative heading.</p>
</body>
</html>
The output displays a bold heading with red horizontal lines on both sides
Some introductory content here. ?????????????? Our Services ?????????????? Content about services follows the decorative heading.
Using Flexbox with Images
Images can also be placed between horizontal lines to create decorative dividers with logos, icons, or other visual elements.
Example
Following example creates horizontal lines with an image in the middle
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line with Image</title>
<style>
.divider-image {
display: flex;
flex-direction: row;
align-items: center;
margin: 40px 0;
}
.divider-image::before,
.divider-image::after {
content: "";
flex: 1 1;
border-bottom: 2px solid #28a745;
margin: 0 25px;
}
.divider-image img {
height: 60px;
width: 60px;
border-radius: 50%;
border: 3px solid #28a745;
background-color: #f8f9fa;
padding: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Content above the image divider.</p>
<div class="divider-image">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='15' fill='%2328a745'/%3E%3Ctext x='20' y='25' text-anchor='middle' fill='white' font-size='14'%3E?</text%3E%3C/svg%3E" alt="Star">
</div>
<p>Content below the image divider.</p>
</body>
</html>
The output shows a star icon centered between green horizontal lines
Content above the image divider. ????????????? ? ????????????? Content below the image divider.
Alternative Method Using CSS Grid
CSS Grid provides another approach for creating horizontal lines with centered content, offering more layout control for complex designs.
Example
Following example uses CSS Grid to create a horizontal line with text
<!DOCTYPE html>
<html>
<head>
<title>Grid Method for Horizontal Lines</title>
<style>
.grid-divider {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
margin: 30px 0;
font-family: Arial, sans-serif;
font-size: 16px;
color: #495057;
}
.grid-divider::before,
.grid-divider::after {
content: "";
border-bottom: 1px solid #6c757d;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Content before the grid divider.</p>
<div class="grid-divider">Section Break</div>
<p>Content after the grid divider.</p>
</body>
</html>
The CSS Grid method creates three columns where the outer columns contain the lines and the middle column holds the text
Content before the grid divider. ???????????? Section Break ???????????? Content after the grid divider.
Customization Options
The horizontal line dividers can be customized with different colors, thicknesses, styles, and spacing. Common variations include dashed lines, gradient borders, and different alignment options.
Example Styled Variations
<!DOCTYPE html>
<html>
<head>
<title>Styled Horizontal Line Variations</title>
<style>
.divider-base {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
margin: 25px 0;
font-family: Arial, sans-serif;
}
.divider-base::before,
.divider-base::after {
content: "";
flex: 1 1;
margin: 0 15px;
}
.dashed::before, .dashed::after {
border-bottom: 2px dashed #17a2b8;
}
.thick::before, .thick::after {
border-bottom: 5px solid #dc3545; 
3K+ Views
