On sites that contain text that requires references (with the help of footnotes), CSS can be useful, by creating a class applicable to that text.
Option 1 – simple
Thus, the horizontal line that delimits the footnote from the rest of the text* can be automatically inserted, by using the :before attribute. For this, my proposal is to use the following parameters of the class, named by me, .notaSubsol:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.notaSubsol { font-family: 'Archivo Narrow', sans-serif; line-height:1.2; padding:0px; margin:0px; font-size:18px; } .notaSubsol:before { display: block; content: ""; border-top: 1px solid #000; width: 300px; margin: 0px; transform: translateY(-0.5rem); } |
It will only be necessary to put the footnote index (either numbering or asterisk), using the <sup>
attribute as you can see in the text above, where I used <sup>* </sup>
.
Exemplification
Option 2 – complex
A little more sophisticated, but with a more professional look is shown below. So using the same class but associated with different tags will have different settings.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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; } |
The class will be used, in the paragraph, as follows in the example below.
1 |
<div class="nota_subs">Lorem ipsum<a class="nota_subs" title="See footnote..." href="#nota_01"></a>, consectetur adipiscing elit<a class="nota_subs" title="See footnote..." href="#nota_02"></a>), dolore magna aliqua<a class="nota_subs" title="See footnote..." href="#nota_03"></a>.</div> |
<p>
tag, but at least this WordPress theme used for this site affects paragraphs with the <p>
tag that have a class attached.Later, the actual content of the footnotes will be enclosed in a <div></div>
or <p></p>
.Also in the idea of precautions, when working with WordPress: when editing an post/page, in Visual mode, you might be surprised that if you don’t have content between the <a></a>
tags, there is a risk to be deleted from the entire link. Therefore, the recommendation is to put a point between them (so, like this:
<a class="nota_subs" title="See footnote..." href="#nota_01">.</a> ), because, after as can be seen above in the CSS code, the color for that point, being set to transparent
, but also a little “crowded” by the negative letter-spacing
value, will make it, in principle, invisible.
1 2 3 4 5 6 |
<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> |
Source: SitePoint.com
Exemplification
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.