Bolehkah saya Menggunakan SVG sebagai Kandungan Pseudo-Element dalam CSS?

Menggunakan SVG sebagai Kandungan Pseudo-Element

Sifat kandungan CSS membenarkan pelbagai jenis kandungan dimasukkan sebelum atau selepas elemen menggunakan unsur pseudo seperti ::sebelum dan ::selepas. Walau bagaimanapun, terdapat sekatan pada kandungan yang boleh disertakan.

Bolehkah SVG Digunakan sebagai Kandungan Pseudo-Element?

Ya, kini boleh menggunakan SVG sebagai kandungan untuk unsur pseudo.

Cara Menggunakan SVG sebagai Kandungan Elemen Pseudo

Terdapat dua kaedah untuk memasukkan SVG sebagai kandungan elemen pseudo:

1. Menggunakan URL:

#test::before {
  content: url(path/to/your.svg);
  /* ... other styles */
}

2. Membenamkan SVG dalam CSS:

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

Contoh HTML:

<div>

Kesimpulan:

Menggunakan SVG sebagai kandungan unsur pseudo memberikan fleksibiliti dan membolehkan elemen yang lebih menarik secara visual dengan menggabungkan vektor grafik.

Atas ialah kandungan terperinci Bolehkah saya Menggunakan SVG sebagai Kandungan Pseudo-Element dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!