Output pada ':hover' sentiasa
"1IPSUM"
Jika saya memutuskan untuk menambah elemen ':before' dengan kandungan 'content:"1"', ia hanya akan menambah 1, menjadikan output sebelum tuding menjadi "11"
Output yang saya mahukan ialah:
Keluaran pada 'hover' ialah "IPSUM"
Fiddle: https://jsfiddle.net/Zxdfvv/u9xgoks3/
.btn:hover:after { padding-bottom: 200px; content:"IPSUM"; }
1
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Terima kasih, EmSixTeen! Saya di sekolah, jadi saya tidak boleh log masuk ke akaun saya. Adakah elemen pseudo berfungsi dengan betul pada pelayar yang berbeza?
Anda menetapkan
content:，而不是为元素本身设置。这就是为什么当您向::before添加内容时，它会显示在元素文本之前，然后如果您使用::afteruntuk elemen pseudo, yang akan muncul selepas teks elemen.Anda boleh menggunakan elemen pseudo untuk menetapkan teks awal. Jadi anda boleh melakukan ini:
html, body { margin: 0; padding: 0; height: 100%; } body { background-color: #006400; display: grid; place-items: center; } main { padding: 1em; display: flex; flex-direction: column; gap: 1em; } .btn { border: 3px solid black; text-align: center; border-radius: 20px; letter-spacing: 2px; padding: 1em 1.5em; background-color: #ffd700; color: black; font-family: monospace; display: inline-block; margin: 1em; } .btn::after { display: inline-block; } .btn--empty::after { content: ""; } .btn--pseudo::after { content: "lorem"; } .btn:hover::after { content: "ipsum"; }