記事本文に挿入する囲みをCSSで作った

こんな感じの囲みが挿入できるように、CSSをぺたぺたした。

NOTES

ほげほげほげほげ

CSSは下記。

/* 囲み */
.notes {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 2px #98b0b3
}
.notes .box-title {
    position: absolute;
    display: inline-block;
    top: -25px;
    left: -1px;
    padding: 0 9px;
    vertical-align: middle;
    font-size: 0.8em;
    background: #98b0b3;
    color: #ffffff;
}
.notes p {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    color: #4c6467
}

記事中に挿入するHTML。

<div class="notes">
<span class="box-title">NOTES</span>
<p>ここに本文を記述</p>
</div>

久しぶりにCSS触ったけど、なんだっけこれ〜ってなった。楽しかったです。