<h1 class="heading">
<span class="heading__summary">
見出し
</span>
</h1>
<h1 class="heading">
<span class="heading__summary">
見出し
</span>
</h1>
.heading {
font-size: 44px;
text-align: center;
font-weight: bold;
}
.heading__summary {
font-size: 50px;
display: block;
position: relative;
border-bottom: 2px solid #000;
font-weight: bold;
width: fit-content;
margin: auto;
}
.heading__summary::before,
.heading__summary::after {
position: absolute;
left: 50px;
height: 0;
width: 0;
border: solid transparent;
content: "";
}
.heading__summary::before {
top: 100%;
margin-left: -8px;
border-color: transparent;
border-top-color: #000;
border-right-color: #000;
border-width: 8px;
}
.heading__summary::after {
top: 99%;
margin-left: -7px;
border-color: transparent;
border-top-color: white;
border-right-color: white;
border-width: 7px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.