Product Hunt: обвести атрибуты data-test
Обводит все элементы с атрибутом data-test и показывает его значение при наведении для написания селекторов.
Код для копирования
/* 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;
}Как использовать этот пример
- Скопируй код кнопкой выше.
- Установи JustZix (2 минуты) и открой расширение на нужной странице.
- Добавь новое правило, совпадающее с этой страницей.
- Вставь код в панель CSS правила и сохрани — эффект появится сразу.
Оцени этот пример
Оценок пока нет — оцени первым.