Formatting footnotes with CSS and HTML

I use Wordpress to post and publish an article. And while composing an article, I usually prefer to use the Text composer.

I was wondering how to properly format a footnotes in a website scholarly article i.e., superscript the footnote number(s) and then properly indent and justify the footnote text with spacing between the footnote numbers and the footnote text (by default, the footnote text flows below the footnote number if the text is more than a single line). You know, like styling just like in MS Word (using indent and tab) or other word processors.

To superscript the footer numbers I could not use the HTML superscript tag as the text composer identifies it as a paragraph and so gives a separate paragraph tag to both the footer number and the footer text (which is not how/what I wanted).

After fiddling with the HTML and CSS for some time, I could do what I wanted with the follow code.

CSS:

.super {
 vertical-align: super;
 font-size: 80%;
}

.footnotes {
 text-indent: 0;
 padding-left: 25px;
 margin-top: -30px;
 display: inline-block;
 line-height: 1.5em;
 text-align: justify;
}

HTML:

<span class="super"><a href="#">1</a></span><span class="footnotes">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>
<span class="super"><a href="#">2</a></span><span class="footnotes">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</span>
<span class="super"><a href="#">3</a></span><span class="footnotes">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </span>