見出しの装飾

html
<h3 class=”hukidashi”><span style=”color: #000000;”>いちご</span></h3>
css
.p-entry__body h3.hukidashi {
position: relative;
padding: 1.5rem 1rem;
border-bottom: 8px solid #00ffff;
border-left: 8px solid #00ffff;
border-radius: 0 0 0 20px;
}

.p-entry__body h3.hukidashi:before {
position: absolute;
left: 3em;
bottom: -26px;
width: 0;
height: 0;
content: ”;
border-width: 21px 12px 0 12px;
border-style: solid;
border-color: #00ffff transparent transparent transparent;
}

.p-entry__body h3.hukidashi:after {
position: absolute;
left: 3em;
bottom: -14px;
width: 0;
height: 0;
content: ”;
border-width: 21px 12px 0 12px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
見出しに上記のcssを使い吹き出し風の装飾をしているのですが、ここにサブタイトルを見出しの上につけたいと思っています。どこに何を追加したらよいのでしょうか。

ヘルプの必要なページ: [リンクを見るにはログイン]