<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.