arcbyte/CSS
学习库CSSPseudo-elements

Pseudo-elements

Style generated fragments, selections, markers, and form parts without extra HTML.

更新于 适用于 Modern CSS

Pseudo-elements target a part of an element or create a decorative box that does not need its own HTML node.

Before, after, and content

label.css
.external-link::after {
  content: " ↗";
  color: var(--signal);
}
.course-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--accent);
}

Generated content is suitable for decoration and redundant hints. Essential instructions and accessible names belong in HTML.

Useful document parts

parts.css
::selection { background: #d9c6e3; }
li::marker { color: #f46537; }
input::placeholder { color: #8d818f; }
dialog::backdrop { background: rgb(20 15 23 / 60%); }

Keep this

Use pseudo-elements to reduce decorative markup, keep important content in the document, and treat form parts as progressive enhancement.

学习位置已保存在此设备上。