Tambah "

Question

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";
}

<div class='btn'>1</div>

P粉275883973 · Answer

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?

P粉715304239 · Answer

Anda menetapkan content:，而不是为元素本身设置。这就是为什么当您向::before添加内容时，它会显示在元素文本之前，然后如果您使用::after untuk 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";
}