Css technique for a horizontal line with words in the middle

Clearing the stage with visual appeal

Looking to add some extra visual charm to your text? Perfectly organize your text relative to the line by ensuring proper line-height and padding. The end result is an elegant alignment of elements:

h2 {
  border-bottom: 1px solid #000; /* Solid line */
  line-height: 0.8em; /* Snuggle text against line */
  text-align: center; /* Center-stage for the text */
}
h2 span {
  background-color: #FFF; /* Snow-white background */
  padding: 0 10px; /* Marshmallow-like softness around text */
  position: relative; /* The chess of CSS */
}


This recipe of styling offers simplicity and works like a charm across browsers.

Jazzing up with line and text styling

Nimble navigation with Flex

With flex, your content morphs, maintaining alignment and spacing:

.h2-flex::before,
.h2-flex::after {
  content: ''; /* An empty canvas */
  border-bottom: 1px solid #000; /* The line of control */
  margin: 0 1em; /* Breathing space */
  flex: 1; /* Life's all about balance */
}
.h2-flex {
  display: flex; 
}


Boxing the text

Enclose your text within a border to draw attention:

.highlight-text {
  padding: 0 10px; /* More padding never hurt */
  border: 1px solid; /* That's where the border lies */
}


Shattering traditional lines

There's something exciting about breaking a line:

.break-line::after {
  content: '';
  display: block;
  height: 1px;
  background: black;
  width: 100%; /* Don't we all love full width */
  margin-top: 15px; /* Healthy space for growing content */
}


Comprehensive detailing: Colors and responsiveness

Adaptive sizing for device compatibility

Gear up your design for all screen sizes with responsive elements:

@media (max-width: 600px) {
  .line-with-text::before,
  .line-with-text::after {
    width: 30%; /* Shrink gracefully */
  }
}


Tinting lines and text colors

Wish to use a different color palette? Here's how:

.line-with-text::before,
.line-with-text::after {
  border-color: #3498db; /* Feeling the Monday blues */
}
h2 span {
  color: #ecf0f1; /* Soft text color */
}


Striking the text with a line

Add a line-through for a stylish visual effect:

.strike-text::after {
  text-decoration: line-through; /* Strike while the code is hot */
}
