Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Honestly I don't see the point in doing superscript/subscript in CSS only. There's no handy CSS attribute for it, just a bunch of homegrown implementations including:</p> <pre><code>.superscript { position: relative; top: -0.5em; font-size: 80%; } </code></pre> <p>or using vertical-align or I'm sure other ways. Thing is, it starts to get complicated:</p> <ul> <li><a href="http://www.xs4all.nl/~sbpoley/webmatters/superscripts.html" rel="noreferrer">CSS superscript spacing</a> on line height;</li> <li><a href="http://www.personal.psu.edu/ejp10/blogs/tlt/2007/02/beware_css_for_superscriptsubc.html" rel="noreferrer">Beware CSS for Superscript/Subcript</a> on why you arguably shouldn't style superscript/subscript with CSS <strong>at all</strong>;</li> </ul> <p>The second point is worth emphasizing. Typically superscript/subscript is not actually a styling issue but is indicative of meaning.</p> <p><strong>Side note:</strong> It's worth mentioning this <a href="http://symbolcodes.tlt.psu.edu/bylanguage/mathchart.html#super" rel="noreferrer">list of entities for common mathematical superscript and subscript expressions</a> even though this question doesn't relate to that.</p> <p>The sub/sup tags are in HTML and XHTML. I would just use those.</p> <p>As for the rest of your CSS, the :after pseudo-element and content attributes are not widely supported. If you really don't want to put this manually in the HTML I think a Javascript-based solution is your next best bet. With jQuery this is as simple as:</p> <pre><code>$(function() { $("a.external").append("&lt;sup&gt;+&lt;/sup&gt;"); }; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload