&lt;html&gt;<br>&lt;head&gt;<br>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;<br>&lt;title&gt;Inhouse CSS Pseudo-Elements - RJM Programming - June, 2020&lt;/title&gt;<br>&lt;style&gt;<br><br>.divbelow:andbelow {  background-color: rgba(255,255,0,0.5);  } <br>.divabove:andabove {  background-color: rgba(0,255,255,0.5);  } <br>.divleft:andleft {  background-color: rgba(255,0,255,0.5);  } <br>.divright:andright {  background-color: rgba(127,127,127,0.5);  } <br><br>&lt;/style&gt;<br>&lt;script type='text/javascript' src='./inhouse_pseudo_elements.js'&gt;&lt;/script&gt;<br> &lt;/head&gt;<br> &lt;body style='background-color:transparent;'&gt;<br> &lt;h1&gt;Inhouse CSS Pseudo-Elements&lt;/h1&gt;<br> &lt;h3 id=myh3&gt;RJM Programming - June, 2020&lt;/h3&gt;<br> &lt;div class=divleft onmouseover="lookformo(this,(false != true));" onmouseout="lookformout(this,(false != true));" onclick="lookfor(this,(false != true));" id=left style="position:fixed; left:26%; top:30%; width: 12%; height: 40%; background-color: yellow;"&gt;Left&lt;br&gt;:andleft&lt;/div&gt;<br> &lt;div class=divabove onmouseover="lookformo(this,(false != true));" onmouseout="lookformout(this,(false != true));" onclick="lookfor(this,(false != true));" id=above style="position:fixed; left:38%; top:30%; width: 12%; height: 40%; background-color: cyan;"&gt;Above&lt;br&gt;:andabove&lt;/div&gt;<br> &lt;div class=divbelow onmouseover="lookformo(this,(false != true));" onmouseout="lookformout(this,(false != true));" onclick="lookfor(this,(false != true));" id=below style="position:fixed; left:50%; top:30%; width: 12%; height: 40%; background-color: magenta;"&gt;Below&lt;br&gt;:andbelow&lt;/div&gt;<br> &lt;div class=divright onmouseover="lookformo(this,(false != true));" onmouseout="lookformout(this,(false != true));" onclick="lookfor(this,(false != true));" id=right style="position:fixed; left:62%; top:30%; width: 12%; height: 40%; background-color: pink;"&gt;Right&lt;br&gt;:andright&lt;/div&gt;<br> &lt;/body&gt;<br> &lt;/html&gt;