Cara Membuat Garis Sejajar Sebelum dan Sesudah Judul

Apakah ada yang sudah kebayang dengan maksud judul di atas, oke jadi seperti ini, cara membuat garis sejajar sebelum dan sesudah judul dimana ketika ada judul tapi di samping kiri dan kanan terdapat sebuah garis yang membungkus si judul tersebut, ada beberapa versi untuk membuat sebuah garis tersebut, di antarannya dengan menggunakan div class sebanayak 3 kali, lalu div itu kita berikan float:left dan float:right, lalu kita berikan css lain, dengan mengaturnya atas bawah supaya sejajar, tetapi saya pernah coba, tidak segampang yang saya bayangkan, dan disini saya menemukan cara yang sangat mudah di bandingkan dengan cara di atas, oke jangan kemana-mana simak terus ya.

Cara membuat garis sejajar sebelum dan sesudah judul, disni saya akan butuh bantuan css jadi nantinya kita akan memanipulasi h1nya dengan before dan after, dimana sebelum dan sesudah h1 kita berikan konten yang isinya kosong tapi kita berikan sebuah garis, disni saya memberikan garis dengan border bottom, ko border bottom hehe, nanti teman-teman lihat sendiri ya, dan kita akan memberikan posision relative dan absolute, dan kita atur juga posisinya, oke langsung saja bagaimana cara membuatanya:

Pertama di body saya hanya membuat seperti saja cukup:

<div class="pembungkus">
	<h1>Cara Membuat Garis Sejajar Sebelum dan Sesudah Judul</h1>
</div>

jadi saya berika div class pembungkus, dengan tag h1. oke selanjutnya:

.pembungkus{text-align: center;}

Pembukusnya supaya ke tengah saya berikan text-align: center

.pembungkus h1{position: relative;  display: inline-block;}

karena h1 sifatnya Block Level Element, jadi saya akan membuatnya, supaya bisa Inline level Element, maka dari itu saya memberikan display inline-block

.pembungkus h1:before{
			content: " ";
			position: absolute;
			border-bottom: 1px solid black;
			width: 100px;
			left: -130px;
			top: 50%;
		}
		.pembungkus h1:after{
			content: " ";
			position: absolute;
			border-bottom: 1px solid black;
			width: 100px;
			right: -130px;	
			top: 50%;
		}

dan ini adalah dimana kita membuat sebuah garis, coba teman-teman perhatikan terlebih dahulu, pasti sudah paham ya, oke seperti ini tampak struktur HTML dan CSSnnya:

<!DOCTYPE html>
<html>
<head>
	<title><strong>Cara</strong> <strong>membuat garis sejajar sebelum dan sesudah judul</strong></title>
	<-e-style type="text/css">

	/*Kita posisikan ke tengah terlebih dahulu*/
		.pembungkus{text-align: center;}

	/*Kita jadikan H1 sebagai posisi relative*/
	/*Jangan Lupa karena H1 termasuk atau sifat tag yang Block level element, maka dari itu kita netralkan menjadi inline level element*/
		.pembungkus h1{position: relative;  display: inline-block;}

	/*dan disini juga kita mulai membuat garis di samping dengan  before after */
		.pembungkus h1:before{
			content: " ";
			position: absolute;
			border-bottom: 1px solid black;
			width: 100px;
			left: -130px;
			top: 50%;
		}
		.pembungkus h1:after{
			content: " ";
			position: absolute;
			border-bottom: 1px solid black;
			width: 100px;
			right: -130px;	
			top: 50%;
		}
	</style>
</head>
<body>
		<div class="pembungkus">
			<h1><strong>Cara</strong> <strong>membuat garis sejajar sebelum dan sesudah judul</strong></h1>
		</div>
		<div class="pembungkus">
			<h1>Kita membuat lagi</h1>
		</div>
		<div class="pembungkus">
			<h1>Lagi</h1>
		</div>
		<div class="pembungkus">
			<h1>dan Lagi</h1>
		</div>
		<div class="pembungkus">
			<h1>Jadi dengan CSS yang sama teman-teman tinggal merubah judulnya saja.</h1>
		</div>
</body>
</html>

Karena saya sudah menjelaskan di atas, sekarang kita langsung lihat hasil jadinya:

Disini saya membuat cukup banyak ya hehe, jadi dengan satu css yang tadi kita bisa mengulang lagi dan lagi, oke saya rasa cukup sampai disini dulu belajar kita tentang Cara membuat garis sejajar sebelum dan sesudah judul, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.