JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<p class="header-group">
  <span class="name">홍길동이름님을 위한 특별한 제안</span>
</p>

<p class="header-group">
  <span class="name">홍길동님을 위한 특별한 제안</span>
</p>

<p class="header-group">
  <span class="name">홍길동이름이제일님을 위한 특별한 제안</span>
</p>

CSS

.header-group {
  overflow: hidden;
  margin: 20px;
  text-align: center;
}
.header-group {}
.header-group .name {
  position: relative;
  display: inline-block;
}
.header-group .name:before,
.header-group .name:after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1000%;
  height: 1px;
  background-color: #000000;
}
.header-group .name:before {
  left: 100%;
  margin-left: 10px;
}
.header-group .name:after {
  right: 100%;
  margin-right: 10px;
}