Die Ausgabe bei ':hover' ist immer
"1IPSUM"
Wenn ich mich entscheide, ein „:before“-Element mit dem Inhalt „1“ hinzuzufügen, wird einfach eine 1 hinzugefügt, sodass die Ausgabe vor dem Hover „11“ lautet
Die Ausgabe, die ich möchte, ist:
Die Ausgabe beim Schweben ist „IPSUM“
Geige: https://jsfiddle.net/Zxdfvv/u9xgoks3/
.btn:hover:after { padding-bottom: 200px; content:"IPSUM"; }
1
谢谢你，EmSixTeen！我在学校，所以无法登录我的账户。伪元素在不同的浏览器上是否能够正常工作？
您正在为伪元素设置
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"; }