Membuat Garis Berwarna Pada Teks

Membuat Garis Berwarna Pada Teks - Dengan pemberian elemen "Underline" pada sebuah teks yang kita anggap penting, cukup menuliskan fungsinya seperti ini: <u>Membuat Garis Berwarna Pada Teks</u> maka teks sudah diberi garis bawah (text-decoration:underline). Namun bukan itu yang akan kita terapkan dalam tutorial kali ini, seperti pembahasan terdahulu tentang »Cara Membuat Border Pada Judul Artikel Blog adalah kegiatan untuk membuat title judul menjadi menarik dengan border-line, efek kali ini akan jauh lebih menarik dan keren untuk memberikan hiasan garis berwarna pada teks tulisan Anda seperti ini:

Memberi garis berwarna disisi TEKS, bukan dibawah teks. Sehingga teks yang menurut Anda penting seperti judul postingan, sub judul atau poin-poin penting saat Anda memberikan informasi tips akan terlihat lebih cantik dan menarik hanya dengan penggunaan CSS seperti ini:

<style type="text/css">
.text-line span {padding:10px;background:#fff}
.text-line.right {text-align:right}
.text-line.center {text-align:center}
.text-line {background-color:red;height:3px;vertical-align:middle;line-height:1px}
p {font:bold 18px Verdana,sans-serif}
</style>

Pada pengaturan CSS diatas, saya memberikan 3 model tampilan warna garis pada teks, Anda tinggal memilih style mana yang menurut Anda berkesan untuk dipasang dalam postingan blog Anda. HTML lengkapnya seperti ini:

<p class="text-line"> <!--letak garis disebelah kanan teks-->
<span>SAHABAT BLOGGER 77</span></p>

<p class="text-line right"> <!--letak garis disebelah kiri teks-->
<span>SAHABAT BLOGGER 77</span></p>

<p class="text-line center"> <!--letak garis disebelah kanan dan kiri teks-->
<span>DEVY INDRIYANI</span></p>

Sederhana, mudah dan terlihat lebih menarik dibanding hanya membuat garis bawah pada teks yang kita inginkan. Sambil memikirkan teks yang akan Anda berikan garis berwarna seperti diatas, bagaimana kalau sambil menikmati »10 Gaya Efek CSS Animasi Pada Teks yang sudah admin rangkum terspesial untuk sahabat semua pecinta SAHABAT BLOGGER 77, saya harap semoga terhibur. Terimakasih dan happy blogging..!!