Hallo sahabat semua bagaimana kabarnya?? masih tetap semangat ya, Baiklah dalam kesempatan kali ini saya akan membahas tentang Tag hr atau penulisannya <hr> merupakan element pada HTML berupa garis lurus mendatar (garis horizontal) . Element HTML <hr> digunakan untuk memisahkan suatu konten atau paragraf satu dengan lainnya berdasarkan pengelompokkan maupun kebutuhan lainnya. Element HTML <hr> sendiri merupakan tag single atau jomblo ya ,maksudnya tidak berpasangan penulisannya jadi bisa ditulis seperti ini <hr> atau < /hr>.Sebagai contohnya bisa diperhatikan pada code dibawah ini :
<p> Ini paragraph pertama </p> <hr> <p> Kalimat yang harus terpisah </p>
seperti diatas contoh diatas <h> digunakan untuk memisahkan 2 buah <p>.
Sekarang saya akan memberikan contoh cara mengcostume element <hr> berikut codenya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Costume tag <hr> HTML</title>
<style>
.container{
width: 500px;
margin:auto;
}
hr#cost1{border:none;height: 1px;background: gray}
hr#cost2{border:2px solid #000;height: 5px;border-radius: 10px;background: linear-gradient(to right, red, yellow, lime); width: 50%;}
hr#cost3{border:none;border-top: 2px solid; color:lime;text-align: center;}
hr#cost3::after{display: inline-block;position: relative;content: "costume-garis";}
</style>
</head>
<body>
<div class="container">
<h3>Normal</h3>
<hr>
<h3>Costume 1</h3>
<hr id="cost1">
<h3>Costume 2</h3>
<hr id="cost2">
<h3>Costume 3</h3>
<hr id="cost3">
</div>
</body>
</html>
Maka hasilnya akan seperti tampilan dibawah ini :
Demikian pembasan yang bisa saya berikan, semoga sahabat dapat lebih mengexplore lagi hasil tampilannya, sampai jumpa lagi dengan pembahasan lainnya
terima kasih.