scss 文字の横に边境を表示する

Posted 2021-05-17

.com-SideBorder {
  position: relative;

  &::before {
    content: "";
    display: block;
    height: 6px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate3d(0, -50%, 0);
  }

  &::after {
    content: "";
    display: block;
    height: 6px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate3d(0, -50%, 0);
  }
}

.com-SideBorder {
  &::before,
  &::after {
    width: calc((100% - 4em) / 2);
  }
}