Textumbrüche & Inline Pseudo Elemente

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ich liebe solche Beiträge. Es geht nur darum, ein kleines Symbol am Ende bestimmter Links hinzuzufügen, aber dabei berührt man am Ende eine Million Dinge. Ich denke, das ist ein Beispiel dafür, warum manche Leute Frontend lustig finden und andere es eher nicht mögen.

Beteiligte Dinge

  1. Coole [attribut]-Selektoren, die externe Links identifizieren
  2. Überlegungen, ob es in Ordnung ist, zusätzliche HTML innerhalb von Links zu verwenden oder nicht
  3. Verwendung von white-space
  4. Kombination von margin-left und padding-right, um Icons in Platzhalterbereiche zu platzieren
  5. Verwendung von benutzerdefinierten Eigenschaften, um Dinge einfacher zu halten
  6. Verwendung von Inline-SVG versus Hintergrund-SVG
  7. Betrachtung von inline versus inline-block
  8. Verwendung von Masken

Direkter Link →