---
tags: Css
---
# CSS 標題中線
###### tags: `css`

h1 {
  font-weight: bold;
  text-align: center;
  position: relative;
  &::before, &::after {
    content: '';
    position: absolute;
    top: 50%;
    overflow: hidden;
    width: 18%;
    height: 1px;
    background-color: $main-color;
    margin-left: 2%;
  }
  &::before {
    margin-left: -20%;
    text-align: right;
  }
}

<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/juest/embed/VwbLXBj?defaultTab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/juest/pen/VwbLXBj">
</a> by gt.juest (<a href="https://codepen.io/juest">@juest</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>