Por ejemplo, elijo una foto y tengo el índice de esta foto de la matriz. Ahora necesito poner este índice (clave) en Content Css. Debe estar vivo si lo consigo. Y sí, nombré mis fotos 0 1 2 3. Así que, por favor, ayuda si tienes más avances. gracias

const images = ['img1', 'img2', 'img3', 'img4', ]; const photoOut = document.querySelector('.photos'); for (let key in images) { let img = document.createElement('img'); img.setAttribute('data-key', key); img.src = 'img/' + key + '.png'; photoOut.append(img); } let messageAfter = document.querySelector('.message') photoOut.addEventListener('click', showIndex); function showIndex(event){ const key = event.target.dataset['key']; console.log(key); photoOut.addEventListener('click', function (changeIndex) { changeIndex.target.setAttribute('data-after', '3'); }); if (key === undefined) { return true; } } ```
``` .message:after { content: attr(data-after); background-color: #FFC200; position: absolute; display: block; width: 25px; height: 25px; border-radius: 15px; color: black; right: -20px; top: 0; text-align: center; line-height: 25px; font-size: 13px; font-weight: bold; } ```
``` <div class="left-block-menu"> <p class="gauzy">MENU</p><br> <p>Home</p><br> <p>My Tasks</p><br> <p class="message">Notifications</p><br> </div> ```