CSS 小見出しグループの作成

CSSファイル

/*見出し1*/
.mh1 {
    background-color: antiquewhite;
}

/*タイトル*/
.mh1 > .title {
    font-size: 1.2rem;
    border-left: 0.5rem solid red;
    border-bottom: 0.1rem solid black;
}

/*中身*/
.mh1 > .description{
    padding-left: 1.5rem;
}

HTML

<div class="mh1">
    <p class="title">タイトル</p>
    <ul class="description">
        <li>要素1</li>
        <li>要素2</li>
        <li>要素3</li>
    </ul>
</div>

表示

タイトル

• 要素1
• 要素2
• 要素3