Product Hunt: outline data-test attributes
Outlines every element with a data-test attribute and shows its value on hover to help write selectors.
Code to copy
/* 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;
}How to use this example
- Copy the code with the button above.
- Install JustZix (2 minutes) and open the extension on the target page.
- Add a new rule matching that page.
- Paste the code into the rule's CSS panel and save — the effect appears instantly.
Rate this example
No ratings yet — be the first.