How TO - Text Divider — How-To Guides

Learn how to create a text divider with CSS.

Lorem Ipsum
OR
AND

How To Create Responsive Text Dividers

Step 1) Add HTML:

Example

html

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

Step 2) Add CSS:

Example

css

  .divider {
  font-size: 30px;
  display: flex;
 
  align-items: center;
}

.divider::before, .divider::after {
  flex: 1;
 
  content: '';
  padding: 3px;
  background-color: red;
 
  margin: 5px;
}