<div class="flex">
<section class="md:w-1/3 w-full p-4">
<h2 class="title linear-dot p-2 mb-3">見出し(linear-gradient)</h2>
<p class="ml-2 mb-3">木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。<br>
一筋の街道はこの深い森林地帯を貫いていた。</p>
</section>
<section class="md:w-1/3 w-full p-4">
<h2 class="title dashed p-2 mb-3">見出し(dashed)</h2>
<p class="ml-2 mb-3">木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。<br>
一筋の街道はこの深い森林地帯を貫いていた。</p>
</section>
<section class="md:w-1/3 w-full p-4">
<h2 class="title dotted p-2 mb-3">見出し(dotted)</h2>
<p class="ml-2 mb-3">木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。<br>
一筋の街道はこの深い森林地帯を貫いていた。</p>
</section>
</div>
.title {
font-weight: bold;
font-size: 105%;
}
.linear-dot {
background-size: 10px 1px;
background-image: linear-gradient(to right, #000, #000 5px, transparent 5px, transparent 10px);
background-repeat: repeat-x;
background-position: 0 100%;
}
.dashed {
border-bottom: 1px dashed #000;
}
.dotted {
border-bottom: 1px dotted #000;
}
This Pen doesn't use any external JavaScript resources.