<div class="headline--type08">
  <h2 class="headlineTitle">
    はみ出すボーダーの見出し　テキストテキスト
  </h2>
</div>
                

.headline--type08 {
  text-align:center;
  display:block;
  .headlineTitle{
    display:inline-block;
    padding:1em 1.5em;
    font-size:1.2em;
    text-align:center;
    border-top: solid 1px #666;
    border-bottom: solid 1px #666;
    position: relative;
    font-weight:bold;
    &::before{
      content: ' ';
      position: absolute;
      top: -0.5em;
      left: 0.5em;
      width: 1px;
      height: calc(100% + 1em);
      background-color: #666;
    }
    &::after{
      content: ' ';
      position: absolute;
      top: -0.5em;
      right: 0.5em;
      width: 1px;
      height: calc(100% + 1em);
      background-color: #666;
    }
  }
}