<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> p{ position: relative; } p:after{ content: attr(txt); opacity: 0; position: absolute; left: 0; background-color: #FFFFFF; transition: 1s; padding: 2px; } p.show:after{ opacity: 1; color: #FFFFFF; background-color: #2F4F4F; } </style> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelector(".btn").addEventListener("click", function(){ document.querySelector(".txt").classList.toggle("show") }); }); </script> </head> <body> <div class="btn">click me!</div> <p txt="Как это лучше реализовать?" class="txt">Всем привет</p> </body> </html>
