<div class="demo demo9"> <div class="heading"><span>毎朝ちゃんと飲むUX</span></div> </div>
.demo { width: 500px; margin: 0 auto; padding: 10px 0; font-family: sans-serif; font-size: 20px; color:#3cb3e4; } .heading { margin: 10px 0 } .demo9 .heading { border-top: 3px solid #3cb3e4; border-bottom: 3px solid #3cb3e4; padding: 5px 20px; position: relative; width: 300px; text-align: center; margin: 30px auto; color: #3cb3e4; font-weight: bold; } .demo9 .heading:before { content: ""; border-left: 3px solid #3cb3e4; border-right: 3px solid #3cb3e4; display: block; position: absolute; width: calc(100% - 20px); height: 58px; top: -8px; left: 8px; }