<html>
<head>
<title>CSS counter via var - RJM Programming - February, 2021 ... thanks to https://css-tricks.com/valid-css-content/</title>
<script type='text/javascript'>
var icnt=0;
var spanstr="<span id=myspan style='--tooltip-string:" + icnt + ";'><h1>CSS counter via var</h1><h3>RJM Programming - February, 2021</h3><h4>Thanks to <a target=_blank title='https://css-tricks.com/valid-css-content/' href='https://css-tricks.com/valid-css-content/'>https://css-tricks.com/valid-css-content/</a></h4></span>";

function thisdecodeURIComponent(inname, inval) {
var outval=decodeURIComponent(inval), dwiurl='';
if (inval != '') {
icnt=eval(inname.replace('dw',''));
dwiurl=(location.search.split(inname.replace('dw', 'di') + '=')[1] ? decodeURIComponent(location.search.split(inname.replace('dw', 'di') + '=')[1].split('&')[0]) : '');
if (dwiurl != '') {
outval='<div style="--tooltip-string:url(' + dwiurl + ');">' + inval + '</div>';
} else {
outval='<div>' + inval + '</div>';
}
spanstr="<span id=myspan style='--tooltip-string:" + icnt + ";'><h1>CSS counter via var</h1><h3>RJM Programming - February, 2021</h3><h4>Thanks to <a target=_blank title='https://css-tricks.com/valid-css-content/' href='https://css-tricks.com/valid-css-content/'>https://css-tricks.com/valid-css-content/</a></h4></span>";
icnt++;
while (inval != '') {
inval=(location.search.split('dw' + icnt + '=')[1] ? decodeURIComponent(location.search.split('dw' + icnt + '=')[1].split('&')[0]) : '');
if (inval != '') {
spanstr="<span id=myspan style='--tooltip-string:" + icnt + ";'><h1>CSS counter via var</h1><h3>RJM Programming - February, 2021</h3><h4>Thanks to <a target=_blank title='https://css-tricks.com/valid-css-content/' href='https://css-tricks.com/valid-css-content/'>https://css-tricks.com/valid-css-content/</a></h4></span>";
inname='dw' + icnt;
dwiurl=(location.search.split(inname.replace('dw', 'di') + '=')[1] ? decodeURIComponent(location.search.split(inname.replace('dw', 'di') + '=')[1].split('&')[0]) : '');
if (dwiurl != '') {
outval+='<div style="--tooltip-string:url(' + dwiurl + ');">' + inval + '</div>';
} else {
outval+='<div>' + inval + '</div>';
}
}
icnt++;
}
}
return outval;
}

function makeget(formo) {
var rawlist=document.getElementById('ilist').value;
if (rawlist != '') {
var cbits=rawlist.split(','), ubits=[];
for (var iuy=0; iuy<cbits.length; iuy++) {
ubits=cbits[iuy].split(':');
if (ubits.length == 1) {
formo.innerHTML+='<input type=hidden name=dw' + eval(1 + iuy) + ' value="' + ubits[0] + '"></input>';
} else {
formo.innerHTML+='<input type=hidden name=dw' + eval(1 + iuy) + ' value="' + ubits[0] + '"></input>';
formo.innerHTML+='<input type=hidden name=di' + eval(1 + iuy) + ' value="' + ubits[1] + '"></input>';
}
}
return true;
} else {
return false;
}
}

var dwstr=(location.search.split('dw1=')[1] ? thisdecodeURIComponent('dw1', location.search.split('dw1=')[1].split('&')[0]) : '<form id=myform onsubmit="return makeget(this);" action=./css_count_image.html><input id=ilist type=text placeholder="Enter comma separated list (we' + "'" + 'll CSS countdown via counter & var) of sets of Title:ImageURL" style=width:99%;" value="" onblur="if (this.value.length > 0) { document.getElementById(' + "'fsub'" + ').click(); }"></input><br><br><input style=display:none; type=submit id=fsub value=Display></input></form>');
</script>
<style>
#myspan {
counter-reset: the-final-countdown var(--tooltip-string);
line-height: 2;
}

div::before {
counter-increment: the-final-countdown -1;
content: "~" counter(the-final-countdown) "~";
background: yellow;
display: inline-block;
width: 20rem;
margin-right: 0.5rem;
text-align: center;
}

div::after {
content: var(--tooltip-string);
}
</style>
</head>
<body data-style="--tooltip-string:12;">

<script type='text/javascript'>
document.write(spanstr + dwstr);
let div = document.querySelector("div");
</script>
</body>
</html>