How to create: text separators

How to create responsive text separators

First step - Add HTML:

<div class="divider">Lorem Ipsum</div>

Second step - Add CSS:

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

Try it yourself

Example explanation:

This example teaches you how to use CSS to create a text separator. Specifically, it uses a combination of HTML and CSS to achieve this effect.

First, you need to add a <div> element with the class name "divider" in HTML and place the text you want to display inside it (in this example, the text is "Lorem Ipsum").

Then, in CSS, you set .divider The class settings have some styles. You set the font size to 30 pixels, used flex layout, and set align-items: center; to make the text vertically centered in the separator line.

Next, you used pseudo-elements ::before and ::after to add decorations on both sides of the separator line. Both pseudo-elements are set flex: 1 to make them occupy .divider All the space in the element except for the text. You also set content: '' To ensure that these pseudo-elements are empty and do not contain any content.

Then, set the inner padding, background color, and margin to define the style of the separator line. In this example, the separator line is red and has some inner and outer margins.