<!doctype html>
<html>
<head>
<style>
.dyk:link + * { background-color:red; }
.dyk:link + *::after { content: ' Yes?'; }
.dyk:hover + * { background-color:yellow; }
.dyk:hover + *::after { content: ' Purrrrrhaps?'; }
.dyk:active + * { background-color:lightgreen; }
.dyk:active + *::after { content:' Wow, thanks for visiting.'; }
#mypheading { position:absolute; top:0; left:0; }
</style>
</head>
<body>
<br><br><h1>The Art of Changing HTML Element Characteristics of Different Elements to One You are Accessing or Changing ... Just via CSS ... Hover and/or Click/Tap below ...</h1><br></br>
<a class='dyk' href='#mypheading' style='cursor:pointer;text-decoration:underline;'>The rain in Spain,
Falls mainly,
On the plain</a>
<p id='mypheading'>Did you like our pithy thought?</p><br><br>
<span> ... and there's more where that came from.</span>
</body>
</html>