cari

Rumah  >  Soal Jawab  >  teks badan

Tambah "<" selepas elemen dengan class='btn' dan gantikan kandungan asal selepas elemen ialah :hover:after

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粉236743689P粉236743689533 hari yang lalu775

membalas semua(2)saya akan balas

  • P粉275883973

    P粉2758839732023-09-10 10:42:23

    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?

    balas
    0
  • P粉715304239

    P粉7153042392023-09-10 09:12:42

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

<body>
  <main>
  
    <a class="btn btn--empty" href="#"></a>

    <a class="btn btn--pseudo" href="#"></a>

  </main>
</body>

</html>

    balas
    0
  • Batalbalas