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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.