<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;
}