<div class="midashi">
  <p>縦揃え未設定↓</p>
  <h2><span>ここに見出し<em class="ng">333</em>が入るよ</span></h2>
</div>
<div class="midashi">
  <p>縦揃え設定↓</p>
  <h2><span>ここに見出し<em class="ok">333</em>が入るよ</span></h2>
</div>
.midashi{
  text-align:center;
}
h2{
  margin: 0 0 20px;
  display: inline-block;
  color: rgba(0,112,74,0.7);
}
span{
  position: relative;
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(88,197,101,0.3);
}
span:before,span:after{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  border: 10px solid transparent;
}
span:before{
  border-top:10px solid rgba(88,197,101,0.3);
}
span:after{
  margin-top: -1px;
  border-top: 10px solid white;
}
em.ng{
  font-size:5em;
  font-family:'Century Gothic';
}
em.ok{
  font-size:5em;
  font-family:'Century Gothic';
  vertical-align:-5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.