在 ':hover' 上的輸出始終是
“1IPSUM”
如果我決定添加一個(gè) ':before' 元素，內(nèi)容為 'content:"1"'，它只會(huì)添加一個(gè) 1，使得在 hover 之前的輸出為 "11"
我想要的輸出是:
在 'hover' 上的輸出為 "IPSUM"
小提琴：https://jsfiddle.net/Zxdfvv/u9xgoks3/
.btn:hover:after {
padding-bottom: 200px;
content:"IPSUM";
}
<div class='btn'>1</div>
2
0
0
謝謝你，EmSixTeen！我在學(xué)校，所以無法登錄我的賬戶。偽元素在不同的瀏覽器上是否能夠正常工作？
您正在為偽元素設(shè)置content:，而不是為元素本身設(shè)置。這就是為什么當(dāng)您向::before添加內(nèi)容時(shí)，它會(huì)顯示在元素文本之前，然后如果您使用::after，它會(huì)顯示在元素文本之后。
您可以使用偽元素來設(shè)置初始文本。所以您可以這樣做：
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>
