Fügen Sie „

Question

Die Ausgabe bei „:hover“ ist immer „1IPSUM“. Wenn ich mich entscheide, ein „:before“-Element mit dem Inhalt „content:“1“ hinzuzufügen, wird nur eine 1 hinzugefügt, wodurch die Ausgabe vor dem Hover als „11“ „The Die Ausgabe, die ich möchte, ist: Die Ausgabe bei „hover“ ist „IPSUM“ Fiddle: https://jsfiddle.net/Zxdfvv/u9xgoks3/.btn:hover:a

P粉275883973 · Answer

谢谢你，EmSixTeen！我在学校，所以无法登录我的账户。伪元素在不同的浏览器上是否能够正常工作？

P粉715304239 · Answer

您正在为伪元素设置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";
}

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial