https://stackoverflow.com/questions/38084921/how-do-i-make-pseudo-element-before-stay-active
006.shtml copied from 001. cpied from 005
used this stack overflow to keep the pre format for the after format of the l
https://stackoverflow.com/questions/38084921/how-do-i-make-pseudo-element-before-stay-active
removed the blue underline from mouse over. reserved blue underline for currently active selected options
I copied from test242 as I was tired of typing in test. also, I wanted to record every single change and test. starting with 001. I wanted to keep a record of all changes to the index.
est242 copied from https://codepad.co/snippet/simple-css-underline-menu
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
side_col {
float: left;
width: 20%;
height: 100%;
background-color: #343A47;
}
.side_link:before {
float: left;
content: "";
display: inline-block;
height: 100%;
width: 7px;
background-color: #343A47;
}
#sl1:target:before,
#sl2:target:before,
#sl3:target:before,
#sl4:target:before {
background-color: #24BDE9;
}
.side_link {
text-align: left;
line-height: 50px;
width: 100%;
height: 50px;
background: #343A47;
color: #fff;
font-weight: 500;
}
.side_link:hover {
background-color: #2b303b;
}
<div class="side_col">
<a href="#sl1">
<div id="sl1" class="side_link">Accounts
</div>
</a>
<a href="#sl2">
<div id="sl2" class="side_link">Newsletter
</div>
</a>
<a href="#sl3">
<div id="sl3" class="side_link">Operator
</div>
</a>
<a href="#sl4">
<div id="sl4" class="side_link">Invoice
</div>
</a>
</div>
discussing innerHTML
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>
<p id="demo"></p>
<script>
const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"The text from the intro paragraph is: " + element.innerHTML;
</script>
</body>
</html>
-----------------------------------