xZee Blog



Menambah teks didepan tag html menggunakan css :before

Plsy Store Street Fight
Zen Sama
xZee Blog
HTML Tutorial

CSS CODE

TENTANG

digunakan untuk membuat sebuah teks dan gaya ^sebelum^ sebuah tag html yang terkait. contoh b:before akan menampilkan teks dan gaya yang di tentukan pada b:before sebelum kode b tersebut.

Contoh sederhana

<style> b.contoh { background-color: gold; } b.contoh:before { content: ">> "; } div.teks { text-align: center; background-color: red; color: black; } div.teks:before { content: "Selamat Datang di "; color: white; } </style> <b class="contoh">xZee Blog css tutorial.</b><br> <b class="teks">xZee Blog css tutorial.</b>
HASIL
xZee Blog css tutorial.
xZee Blog css tutorial.

Contoh dengan background

<style> b.contoh { background-color: gold; } b.contoh:before { content: ">> "; background-color: red; color: gold; } </style> <b class="contoh">xZee Blog css tutorial.</b>
HASIL
xZee Blog css tutorial.

agar tambahan dari atribut :before lebih rapi tambah sebuah margin dan padding contoh seperti berikut.
<style> b.contoh3 { background-color: gold; } b.contoh3 { content: ">>"; background-color: red; color: gold; margin-right: 0.5em; padding: 0 5px; } </style>
HASIL + margin padding
xZee Blog css tutorial.

Contoh sebuah list

<style> ul.contoh { margin: 0; background-color: gold; border: 2px solid red; list-style: none; } li.contoh { background-color: red; margin: 2px; padding: 3px; } li.contoh:before { content: "¤"; color: white; margin-right: 1em; } </style> <ul> <li class="contoh">xZee Blog</li> <li class="contoh">Zen Sama</li> <li class="contoh">Lenna Gracie</li> </ul>
HASIL
List style diganti dengan symbol menggunakan css atribut before

atribut :before content: '¤'; pada tag style menggantikan gaya list yang dihilangkan pada style css ul "list-style: none;"

Membuat layout mirip buku

<style> div.contoh { font-family: 'Arial'; background-color: snow; border: 1px solid black; border-left: none; border-top: none; line-height: 1.5em; } div.atas { border-top: 2px solid black; } div.bawah { border-bottom: 2px solid black; } div.contoh:before { content: "•"; background-color: silver; color: black; border: 1px solid black; border-top: none; margin-right: 0.3em; padding: 3px; box-sizing:border-box; } </style> <div class="contoh atas">Nama Lengkap: Zen Sama</div> <div class="contoh">Alamat: getItemById('anu')</div> <div class="contoh">Kecamatan: Padding</div> <div class="contoh bawah">Kabupaten: Margin</div>
HASIL
Nama Lengkap: Zen Sama
Alamat: getItemById('anu')
Kecamatan: Padding
Kabupaten: Margin

CATATAN: contoh diatas hanya untuk teks singkat saja, apabila teks panjang maka baris kedua seterusnya tidak menggunakan :before lagi (titik hitam di bagian kiri).
oke itulah kira-kira penjelasan saya mengenai atribut css :before yang mungkin memang tidak semuanya di beri contoh karena nanti terlalu panjang :-)

akhir kata semoga bermanfaat...
Share This Post

Post Detail


Posted By: Zen Sama
Posted On: 15 Nov 2017 11:19
Category: Belajar HTML dan CSSBlog dan Web


Leave a Comment

ega galieh
15 Nov 2017 12:03
biasanya menambahkan atribut seperti itu diletakkan pada ul li blockquote pre dll
Zen Sama
15 Nov 2017 14:39
kalo Pre dan blockquote kurang cocok karena atribut before seperti tag span jadi terlalu panjang hasil berantakan.
kalo untuk list dan variasi bagus.

Please Login first for post a comment

Bookmark
Category
Please switch off your AdBlock and refresh this page :)