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:

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>.


* This footnote is created using the above class.

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.

The class will be used, in the paragraph, as follows in the example below.

The top paragraph can also be enclosed in the <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.



Lorem ipsum, consectetur adipiscing elit), dolore magna aliqua.

  1. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  3. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This second variant can be seen “at work” in the article from the following link. The code can also be downloaded from here.

Author: Ovidiu.S

I am quite passionate about this professional area as if I know something - no matter how little - I want to share it with others.

Leave a Reply