Cara Membuat Garis Sejajar Sebelum dan Sesudah Judul
Apakah ada yang telah kebayang dengan maksud judul di atas, oke jadi seperti ini, cara merancang garis sejajar sebelum dan setelah judul dimana ketika ada judul tapi di samping kiri dan kanan terdapat sebuah garis yang membungkus si judul tersebut, ada beberapa versi bagi merancang 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, tak segampang yang saya bayangkan, dan disini saya menemukan cara yang betul-betul gampang di bandingkan dengan cara di atas, oke jangan kemana-mana simak terus ya.
Cara merancang garis sejajar sebelum dan setelah judul, disni saya akan butuh bantuan css jadi nantinya kita akan memanipulasi h1nya dengan before dan after, dimana sebelum dan setelah 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 pun posisinya, oke seketika saja bagaimana cara membuatanya:
Pertama-tama di body saya hanya merancang seperti saja lumayan:
<div class=pembungkus>
<h1>Cara Membangun Garis Sejajar Sebelum dan Setelah Judul</h1>
</div>
jadi saya berika div class pembungkus, dengan tag h1. oke berikutnya:
.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 dapat Inline level Element, karenanya 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 yakni dimana kita merancang sebuah garis, coba teman-teman perhatikan terlebih dahulu, pasti telah paham ya, oke seperti ini tampak struktur HTML dan CSSnnya:
<!DOCTYPE html>
<html>
<head>
<title><strong>Cara</strong> <strong>merancang garis sejajar sebelum dan setelah judul</strong></title>
<-e-style type=text/css>
/*Kita posisikan ke tengah terlebih dahulu*/
.pembungkus{text-align: center;}
/*Kita jadikan H1 selaku posisi relative*/
/*Jangan Lupa karena H1 termasuk atau sifat tag yang Block level element, karenanya dari itu kita netralkan menjadi inline level element*/
.pembungkus h1{position: relative; display: inline-block;}
/*dan disini pun kita mulai merancang 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>merancang garis sejajar sebelum dan setelah judul</strong></h1>
</div>
<div class=pembungkus>
<h1>Kita merancang 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 telah menjelaskan di atas, sekarang ini kita seketika lihat hasil jadinya:
Disini saya merancang lumayan banyak ya hehe, jadi dengan satu css yang tadi kita dapat mengulang lagi dan lagi, oke saya rasa lumayan hingga disini dulu belajar kita mengenai Cara merancang garis sejajar sebelum dan setelah judul, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
