Pe site-urile care conţin texte ce necesită referinţe, cu ajutorul notelor de subsol, CSS-ul poate fi de folos, prin crearea unei clase aplicabile acelui text.
Varianta 1 – simplă
Astfel, se poate introduce automat şi acea linie orizontală care delimitează nota de subsol de restul textului*, prin folosirea atributului :before. Pentru aceasta, propunerea mea este a se folosi următorii parametri ai clasei, denumite de mine, .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); } |
Va fi necesar, doar, să puneţi indexul notei de subsol (fie numerotare, fie asterisc), folosind atributul < sup> după cum vedeţi şi la textul de sus, unde am folosit < sup>* < /sup >
Exemplificarea
Varianta 2 – complexă
Un pic mai sofisticat, dar cu aspect mai profesional este prezentat mai jos. Astfel, folosind o clasă, dar asociată cu etichete diferite, va avea setări diferite.
|
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; } |
Clasa va fi utilizată, în paragraf, după cum urmează în exemplul de mai jos.
|
1 |
<div class="nota_subs">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<a class="nota_subs" title="Vezi nota..." href="#nota_03"></a>.</div> |
Ulterior, conţinutul propriu-zis al notelor de subsol va fi inclus într-un div sau p. Tot în ideea precauţiilor atunci când se lucrează cu WordPress: atunci când se editează un articol/pagină, în modul Visual, s-ar putea să aveţi supriza că, dacă între etichetele <a></a> nu aveţi conţinut, există riscul ca să fi se şteargă de tot linkul. De aceea, recomandarea este de a pune un punct între ele (deci, aşa: <a class="nota_subs" title="Vezi nota..." href="#nota_01">.</a> ), deoarece, după cum se poate vedea mai sus în codul CSS, culoarea pentru acel punct, fiind setată pe transparent, dar şi puţin „înghesuit” prin valoarea negativă de la letter-spacing, îl va face, în principiu, invizibil.
|
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> |
Sursa: SitePoint.com
Exemplificarea
- 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.
