Cara Membuat Background Color Selebar Tulisan dengan CSS

Adalah ketika perlu menyorot satu baris teks untuk membuatnya lebih menonjol, saya menemukan kode sederhana dengan CSS tentang bagaimana cara membuat background color selebar teks dalam satu baris. Ini lebih merupakan masalah selera daripada sebuah keharusan, karena orang bisa cukup mengatur warna latar belakang dengan lebar yang sama dari wadah teksnya.

Selera desain adalah salah satu pembeda yang paling terlihat pada blog, meskipun tanpa konten berkualitas temtu tidak akan banyak membantu pemilik blog untuk menarik pengunjung. Namun, jika biayanya tidak mahal, biasanya selalu baik untuk melakukan perbaikan terus-menerus pada desain blog, betapapun kecilnya.

Biaya yang tidak boleh dikeluarkan pemilik blog terkait dengan desain blog adalah jika itu akan mengorbankan kecepatan loading halaman secara agak signifikan. Kecepatan adalah salah satu faktor penting yang harus selalu diingat setiap kali memiliki godaan untuk membuat perubahan pada pengaturan blog saat ini.



Cara paling sederhana untuk menyorot frasa kalimat memakai CSS adalah hanya dengan menggunakan kode background-color seperti,

CSS:
.hightlight{background-color:#555;color:#fff;padding:5px}

HTML:
<div class="highlight">Bagaimana Cara Membuat Background Color</div>

Bagaimana Cara Membuat Background Color

Tapi, seperti terlihat di atas, warna latar mengisi lebar seluruh baris.

Ada beberapa cara ketika menggunakan CSS untuk mengatur warna latar belakang menjadi lebar teks yang sama, bukan seluruh panjang baris. Yang paling sederhana adalah menggunakan <span> alih-alih <div> seperti,

CSS:
.hightlight{background-color:#777;color:#fff;padding:5px}

HTML:
<span class="highlight">Bagaimana Cara Membuat Background Color</span>

Bagaimana Cara Membuat Background Color

Pilihan lain adalah memakai, display: table;

CSS:
h1{display:table;background-color:#999;color:#fff;padding:10px;font-size:1em}

HTML:
<h1>Bagaimana Cara Membuat Background Color</h1>

Bagaimana Cara Membuat Background Color

Pilihan berikutnya adalah menggunakan display: inline-flex;

CSS:
.hightlight{display:inline-flex;background-color:#222;color:#fff;padding:7px;font-size:1.2em}

HTML:
<div class="highlight">Bagaimana Cara Membuat Background Color</div>

Bagaimana Cara Membuat Background Color

Dewa Gitar Finger Style Itu Bernama Alip Ba Ta || Video

Ada beberapa cara lain untuk mengatur background color untuk membuatnya selebar teks, namun sebagian besar bisa dikatakan agak kurang praktis. Namun, silahkan melihatnya sendiri di sini.
Label: Blogger, CSS, Inspirasi, Tutorial, WordPress
Bagikan ke: WhatsApp, Email. Print!.

Penulis: Bambang Aroengbinang, seorang penyusur jalan.
Traktir BA secangkir kopi? Scan via 'Bayar' GoPay.