Cara menggunakan CSS Function attr()

Hallo teman-teman, pada kesempatan kali ini saya akan memberikan sebuah trik tentang css. Seperti yang saya jelaskan pada artikel saya sebelumnya tentang cara menggunakan fungsi calc , dimana function adalah baris kode yang sudah diatur dengan ketentuan baku untuk dapat langsung digunakan oleh pembuat program.

Jika pada artikel sebelumnya saya membahas tentang fungsi calc(), kali ini saya akanmembahas tentang salah satu function yang ada di css, yaitu attr()

fungsi attr ini adalah memberikan value pada sebuah elemen dengan berdasarkan attribute yang digunakan.

Contoh penggunaannya adalah seperti ini:

diatas saya memiliki tag <a> dengan attribute href yang valuenya http://www.dumetschool.com

selanjutnya adalah kita membuat sebuah style dengan memanfaatkan pseudo content :after dan memberikannya property content.

di dalam content ini lah saya berikan fungsi attr() untuk memunculkan value dari attribute href tersebut.

Maka ketika kita lihat di browser akan terlihat seperti ini.

Seperti yang kita lihat diatas, hasil yang tampil di browser memiliki alamat url sama persis dengan apa yang diketikkan pada value attribute href.

Baiklah teman-teman, demikian pembahasan tentang cara menggunakan css function attr, semoga dapat bermanfaat bagi kalian, terima kasih

 

26 November 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat