Title: Styling Superscript
Last modified: August 22, 2016

---

# Styling Superscript

 *  [sanjayrath](https://wordpress.org/support/users/sanjayrath/)
 * (@sanjayrath)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/styling-superscript/)
 * I have styled the superscript but that does not work for the footnote plugin 
   while it works very well for other superscripts where the `<sup>` is used
 *     ```
       /*Subscrip, Superscript Footnotes*/
       sub, sup {font-size: 75%; line-height: 0;position: relative;vertical-align: baseline;}
       sup {top: -0.5em;}
       sub {bottom: -0.25em;}
       ```
   
 * Subsequently I tried to copy that for the footnotes css styling using
    `.footnote_plugin_tooltip{
   font-size: 0.8em; line-height: 0; position: relative; vertical-align: baseline;
   top: -0.5em;}` as well as `.footnote_plugin_tooltip_text { font-size: 0.8em; 
   line-height: 0; position: relative; vertical-align: baseline; top: -0.5em;}` 
   but to no avail. Take a look at this page where the superscript forks for ‘th’
   but not for footnote index [http://dhimanta.com/jsp-a/prarambha/v%E1%B9%9Bddha-methodology](http://dhimanta.com/jsp-a/prarambha/v%E1%B9%9Bddha-methodology)
 * [https://wordpress.org/plugins/footnotes/](https://wordpress.org/plugins/footnotes/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Thread Starter [sanjayrath](https://wordpress.org/support/users/sanjayrath/)
 * (@sanjayrath)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/styling-superscript/#post-5575626)
 * OK I found the solution. Modified the public.css file in the Plugin folder at/
   wp-content/plugins/footnotes/css
    Changed the CSS to make it the same as the 
   rest of the website and also gave it the color blue to show that it is linked.
   Easy for readers.
 *     ```
       /* superscript */
       .footnote_plugin_tooltip_text {
       font-size: 75%;
       line-height: 0;
       position: relative;
       vertical-align: baseline;
       top: -0.5em;
       cursor: pointer;
       color:#0099FF;
       }
       ```
   
 *  [davydov-denis](https://wordpress.org/support/users/davydov-denis/)
 * (@davydov-denis)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/styling-superscript/#post-5575771)
 * I also experienced similar issues which lead to the same CSS file:
    [https://wordpress.org/support/topic/footnotes-alignment-and-footnote_plugin_tooltip_text-in-csspubliccss?replies=1](https://wordpress.org/support/topic/footnotes-alignment-and-footnote_plugin_tooltip_text-in-csspubliccss?replies=1)
 * Hopefully the author will eventually fix those bugs… Or at least remove those`!
   important` tags from the CSS.
 *  [davydov-denis](https://wordpress.org/support/users/davydov-denis/)
 * (@davydov-denis)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/styling-superscript/#post-5575772)
 * btw, I ended up putting the custom CSS in my theme with “important” key to override
   those from the footnotes/css, i.e.
 * .footnote_plugin_tooltip_text {
    top: 0.5em !important; }
 * this worked for me.
 *  [inspiredmind](https://wordpress.org/support/users/inspiredmind/)
 * (@inspiredmind)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/styling-superscript/#post-5575779)
 * Looks like this can now (if not a few weeks ago when you folk posted your workarounds),
   by putting your custom CSS into the **Customize** page of plugin settings, in
   the **Add custom CSS to the public page** section.
 *  [Ian](https://wordpress.org/support/users/ianonmac/)
 * (@ianonmac)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/styling-superscript/#post-5575783)
 * Hi Sanjay, that works great, although I find the number is too high in my opinion,
   so I changed the line height to 2 and removed the colour to be more discreet 
   and less of a distraction. This is now in my Footnotes custom CSS:
 * /* superscript */
    .footnote_plugin_tooltip_text { font-size: 65%; line-height:
   2; position: relative; vertical-align: baseline; cursor: pointer; }
 *  Thread Starter [sanjayrath](https://wordpress.org/support/users/sanjayrath/)
 * (@sanjayrath)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/styling-superscript/#post-5575795)
 * Ian, welcome. each theme needs a little tinkering and touch.
    Inspiredmind, Some
   themes do not respond well to adding the code in the ‘Add custom CSS to the public
   page”. I don’t know why, but Rocket themes do not respond. So it is better to
   use the old way for them

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Styling Superscript’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/footnotes_9d9c99.svg)
 * [footnotes](https://wordpress.org/plugins/footnotes/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/footnotes/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/footnotes/)
 * [Active Topics](https://wordpress.org/support/plugin/footnotes/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/footnotes/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/footnotes/reviews/)

## Tags

 * [footnote](https://wordpress.org/support/topic-tag/footnote/)
 * [index](https://wordpress.org/support/topic-tag/index/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)

 * 6 replies
 * 4 participants
 * Last reply from: [sanjayrath](https://wordpress.org/support/users/sanjayrath/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/styling-superscript/#post-5575795)
 * Status: not resolved