CSS, un lenguaje que define el estilo y el diseño, tiene muchas funciones interesantes. Algunas de ellas son las funciones attr() y counter(). Hoy las usaremos para crear un inspector de elementos muy simple con CSS puro.

Ten en cuenta que aunque JS sería la solución "normal" aquí, estamos experimentando con CSS y HTML.

¿Qué son estas funciones?

Ambas devuelven valores cuando se usan con la propiedad content. attr devuelve el valor de un atributo HTML dado mientras que counter puede usarse para contar un número de elementos (por ejemplo, si quieres anteponer un número a cada h2).

Puedes leer más sobre ellos en MDN.

La idea

Si attr() devuelve un atributo, podemos usarlo para obtener la clase y el id del elemento, que es uno de los principales casos de uso de Inspeccionar Elemento.

En cuanto a counter(), lo usaremos para mostrar el número del elemento de una lista desordenada.

Escribiendo el HTML

El siguiente fragmento de HTML ejemplifica la idea:

<div class="css-pure-inspect">
  <div class="hola" id="clank">
    Esto es una prueba
  </div>
  <ul>
    <li>Prueba</li>
    <li>Foo</li>
    <li>Bar</li>
  </ul>
</div>

Fíjate que lo he envuelto en un div para evitar colisión con otros elementos y, sobretodo, un caos visual.

El CSS

Lo primero que vamos a hacer es estilizar la caja que se mostrará al pasar por encima.

.css-pure-inspect *:hover::after {
  padding: 6px;
  position: absolute;
  font-family: sans-serif;
  font-size: 13px;
  background: #fff;
  border: 1px solid #ccc;
  white-space: pre;
}

Para un proyecto real, * generalmente se desaconseja por razones de rendimiento.
white-space: pre; es un truco que se utiliza con el escape de caracteres \a para crear saltos de línea en el contenido CSS.
absolute es obligatorio para evitar que la caja interfiera con el flujo del documento. Dependiendo del sitio puede necesitar un z-index.

Ahora que hemos dado estilo a la caja, vamos a mostrar el contenido real - las clases CSS y los IDs, pero los atributos de datos o incluso los textos alt podrían funcionar si los añades.

.css-pure-inspect *[class]:hover::after {
  content: "Clases: " attr(class);
}
.css-pure-inspect *[id]:hover::after {
  content: "ID: " attr(id);
}
.css-pure-inspect *[class][id]:hover::after {
  content: "Clases: " attr(class) "\a ID: " attr(id);
}
.css-pure-inspect *[class][id]:hover::after {
  content: "Clases: " attr(class) "\a ID: " attr(id);
}

Sí, puedes concatenar texto plano y atributos en content.
El truco del salto de línea es el que se ha explicado anteriormente.
Algunos elementos tienen una clase, otros sólo tienen un div. Los atributos en el selector se añadieron para comprobarlo. Y gracias a las reglas de orden y especificación de CSS, anulamos el estilo anterior.

Y eso es todo para la mayoría de los elementos. Pero no hemos utilizado la función counter(). ¿Recuerdas la lista HTML ul que creamos antes?

.css-pure-inspect ul {
  counter-reset: list-inspect;
}

.css-pure-inspect li {
  counter-increment: list-inspect;
}

.css-pure-inspect li:hover::after {
  content: "Elemento de la lista #"counter(list-inspect);
}

El contador se reinicia en cada ul
Se incrementa cada li y lo mostramos en la caja mostrada en :hover

Resultado de la demostración

https://jsfiddle.net/owlnai/q61ebdL4/1/