← Alle Beispiele

Product Hunt: data-test-Attribute hervorheben

Umrandet alle Elemente mit data-test-Attribut und zeigt den Wert beim Überfahren, um Selektoren zu schreiben.

Code zum Kopieren

/* Developer aid: outline every element carrying a data-test hook */
[data-test] {
  outline: 1px dashed rgba(218,85,47,0.55) !important;
}
[data-test]:hover {
  outline: 2px solid #da552f !important;
}
[data-test]:hover::after {
  content: attr(data-test);
  position: absolute;
  z-index: 99999;
  background: #da552f;
  color: #fff;
  font: 11px/1.4 monospace;
  padding: 2px 6px;
  border-radius: 3px;
}

So verwendest du dieses Beispiel

1. Kopiere den Code mit der Schaltfläche oben.
2. Installiere JustZix (2 Minuten) und öffne die Erweiterung auf der Zielseite.
3. Füge eine neue Regel hinzu, die zu dieser Seite passt.
4. Füge den Code in das CSS-Panel der Regel ein und speichere — der Effekt erscheint sofort.