在class='btn'的元素之後加上"<"，並在元素被:hover:after之後替換原始內容-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

在class='btn'的元素之後加上"<"，並在元素被:hover:after之後替換原始內容

P粉236743689 2023-09-09 12:32:51

495

在 ':hover' 上的輸出總是

「1IPSUM」

如果我決定加入一個 ':before' 元素，內容為 'content:"1"'，它只會增加一個 1，使得在 hover 之前的輸出為 "11"

我想要的輸出是:

在 'hover' 上的輸出為 "IPSUM"

小提琴：https://jsfiddle.net/Zxdfvv/u9xgoks3/

.btn:hover:after {
  padding-bottom: 200px;
  content:"IPSUM";
}

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

P粉236743689

全部回覆(2)

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

謝謝你，EmSixTeen！我在學校，所以無法登入我的帳戶。偽元素在不同的瀏覽器上是否能夠正常運作？

點贊 +0

新增回覆

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

您正在為偽元素設定content:，而不是為元素本身設定。這就是為什麼當您在::before新增內容時，它會顯示在元素文字之前，然後如果您使用::after，它會顯示在元素文字之後。

您可以使用偽元素來設定初始文字。所以您可以這樣做：

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

點贊 +0

新增回覆