[CSS] 텍스트 양쪽으로 가로선 넣기

코드

첨에 선이 안뵈길래 inline이라 그런가 싶어 block 넣어봤다가 너비를 지정하지 않아서 생기는 문제란 걸 알았다!
웁스

const textWithLineStyle = css`
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  width: 100%; /* textWithLine이 차지할 너비 설정. 중요! */
  gap: 15px; /* 선과 텍스트 사이 간격 */

  &::before,
  &::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #d6d6d6;
  }
`;

emotion의 css prop 방식이다.

적용

요런 넉김