Footnote lookalike

Designed to look like footnotes in MS Word

by Ovi Stof

HTML

<div class="nota_subs"><p>Lorem ipsum<a class="nota_subs" title="Vezi nota..." href="#nota_01"></a>, consectetur adipiscing elit<a class="nota_subs" title="Vezi nota..." href="#nota_02"></a>), dolore magna aliqua.</p>
<p>
Purus integer dignissim elementum<a class="nota_subs" title="Vezi nota..." href="#nota_03"></a> litora. 
</p>
</div>
<hr class="nota_subs" /> 
<ol class="nota_subs"> 
<li id="nota_01">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> 
<li id="nota_02">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li> 
<li id="nota_03">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 
</ol>
<hr />
<p>
NOTE: You can read some explanations <a href="https://tic.ovio.ro/2019/02/27/footnotes/" target="_blank">here</a>.
</p>

CSS

div.nota_subs
, p.nota_subs
, h4.nota_subs 
{counter-reset: nota_sub; }
div.nota_subs a::before
, p.nota_subs a::before
, h4.nota_subs a::before 
{
	counter-increment: nota_sub; 
	content: "(" counter(nota_sub, decimal) ")";
	color:darkblue;
	font-family: Arial;
	} 
a.nota_subs {
	position: relative; 
	top: -0.5em; 
	padding-left:3px;
	text-decoration:none;
	font-style:normal;
	font-size: .7em; /*80%;*/
	content: counter(note, decimal) ") ";
	counter-increment: note;
	color:transparent;
	letter-spacing: -.25px;
	}
ol.nota_subs {
	counter-reset: list;
	margin:0;
	}
hr.nota_subs {
	width:25%;
	margin: 25px 0 10px 0;
	}
ol.nota_subs > li {
	list-style: none;
	padding-top:6px;
	padding-left: 10px ;
	text-indent: -12px ; 
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 100%;
	line-height:1.25;
	}
ol.nota_subs > li:before {
	content: counter(list, decimal) ") ";
	counter-increment: list;
	position: relative; 
	top: -0.5em; 
	font-style:normal;
	font-size: 80%;
	padding-right: 2px;
	}