<div class="wrapper">
  <div class="line">또는</div>
  <div class="line line_blue">또는</div>
  <div class="line line_without_gap">FlexBox gap 제거 버전</div>
</div>

.wrapper {
  width: 800px;
  margin: 0 auto;
}

.line {
  display: flex; 
  gap: 1em;
  align-items: center;
  margin: 50px 0;
}

.line::before,
.line::after {
  content: ' '; 
  flex-grow: 1;
  height: 1px;
  background-color: currentColor;
  opacity: 0.4;
}

.line_blue {
  color: dodgerblue;
}

/* FlexBox gap 제외하고 구현 */
.line_without_gap {
  gap: 0;
  margin: 50px -1em; /* Negative margins */
}

.line_without_gap::before,
.line_without_gap::after {
  margin: 0 1em; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.