How to Create a Text Divider with CSS?
Last Updated :
20 Aug, 2024
A text divider is a visual element used to separate content within a web page providing clarity and improving readability. In CSS we can create text dividers using various approaches such as horizontal lines, background images, or pseudo-elements.
Below are the approaches to create a text divider with CSS:
Using a Horizontal Line
This approach utilizes the <hr> element, Which is a standard HTML element for horizontal lines and we can customize it with CSS to separate a text divider.
Example: Below example shows the implementation of the above-mentioned approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Divider Example</title>
<style>
hr.custom-divider {
border: none;
height: 1px;
background-color: #000;
margin: 20px 0;
}
</style>
</head>
<body>
<hr class="custom-divider">
<p>Content after the divider</p>
</body>
</html>
Output:
outputUsing Pseudo-Elements
This approach involves using the ::before or ::after pseudo elements to create dividers around text. This method provides greater flexibility in design.
Example: Below example shows the implementation of the above-mentioned approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Divider Example</title>
<style>
.divider-with-pseudo::before {
content: "";
display: inline-block;
width: 30%;
height: 1px;
background-color: #000;
vertical-align: middle;
margin-right: 10px;
}
.divider-with-pseudo::after {
content: "";
display: inline-block;
width: 30%;
height: 1px;
background-color: #000;
vertical-align: middle;
margin-left: 10px;
}
</style>
</head>
<body>
<p class="divider-with-pseudo">Content Divider</p>
</body>
</html>
Output:
output_imageUsing Background Images or Gradients
We can create dividers using CSS background images or gradients allowing for complex and decorative designs.
Example: Below example shows the implementation of the above-mentioned approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Divider Example</title>
<style>
.text-divider-bg {
max-width: 700px;
background: linear-gradient(to right, #952222, transparent);
height: 5px;
margin: 20px 0;
position: relative;
}
.text-divider-bg span {
background: #fff;
padding: 0 10px;
position: relative;
top: -10px;
}
</style>
</head>
<body>
<div class="text-divider-bg">
<span>OR</span>
</div>
</body>
</html>
Output:
outputUsing Flex box and Borders
Flex box can be used to create dividers by aligning text and borders in a row this method is ideal for creating centered or justified text dividers.
Example: Below example shows the implementation of the above-mentioned approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using Flex box and Borders</title>
<style>
.flex-divider {
display: flex;
align-items: center;
text-align: center;
}
.flex-divider::before,
.flex-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}
.flex-divider::before {
margin-right: 10px;
}
.flex-divider::after {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="flex-divider">OR</div>
</body>
</html>
Output:
outputUsing CSS Grid
CSS grid allows for more complex layouts and can be used to create dividers that align with a grid structure.
Example: Below example shows the implementation of the above-mentioned approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using Css Grid</title>
<style>
.grid-divider {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.grid-divider::before,
.grid-divider::after {
content: "";
height: 1px;
background-color: #000;
}
</style>
</head>
<body>
<div class="grid-divider">OR</div>
</body>
</html>
Output:
output
Similar Reads
How to Create Dividers with CSS ? A divider is a crucial element in web design to visually separate content and enhance the overall layout. In CSS, there are several approaches to creating dividers, each offering flexibility and customization options. We can achieve this effect in many ways like CSS Border Property, Pseudo-elements,
3 min read
How To Create Carved Text Effect using CSS? The carved text effect is also known as the embossed effect as it looks like the text has been embossed on a background. It is also known as Neumorphism in CSS. This effect is used when we want to give our website a clean and refreshing look. The embedded text can be of the same color as the backgro
2 min read
How to Creating Horizontal Rule Divider with Text in Tailwind CSS ? In this article, we will understand how to create a horizontal rule (HR) divider that contains text with Tailwind CSS. The problem here is that in an HR, there is no text, & only a divider is visible, and there is no default method to add text in Tailwind CSS. Tailwind CSS is a highly customizab
3 min read
How to create linear gradient text using HTML and CSS ? The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide
2 min read
How to Create a Cutout Text using HTML and CSS ? Cutout text is used as a background header of the webpage. The cutout text creates an attractive look on the webpage. To create a cutout text we will use only HTML and CSS. We display the cutout text and then we make the text blending of an element’s background with the element’s parent. The CSS mix
2 min read
How to Center Text in CSS? Text Centering ensures that the text appears in the middle of a container or the entire page, which can create a balanced and visually appealing layout. CSS can provide multiple ways to achieve text centering, depending on the context, such as horizontally or vertically centering within the containe
4 min read