{"id":3014,"date":"2016-11-06T11:20:08","date_gmt":"2016-11-06T17:20:08","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1974"},"modified":"2016-11-06T11:20:08","modified_gmt":"2016-11-06T17:20:08","slug":"create-superscript-and-subscript-text-in-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/create-superscript-and-subscript-text-in-css\/","title":{"rendered":"Create Superscript and Subscript Text in CSS"},"content":{"rendered":"

With CSS3’s vertical-align property, its super easy to create superscript and subscript effects in your HTML text. Often this is done by using inline HTML tags, but that’s not really a great practice. Using CSS rather than HTML to achieve this effect makes your code more flexible and dynamic, especially if there are a lot of occurrences of subscript and superscript in your project.<\/p>\n

\"Screen<\/p>\n

To start, make sure you put the text you want to be subscript or superscript within span tags with corresponding classes. \u00a0Your HTML will probably look something like this:<\/p>\n

<p>Regular text regular text regular text<span class=\"super\">Superscript<\/span><\/p>\n<p>Regular text regular text regular text<span class=\"sub\">Subscript<\/span><\/p><\/pre>\n
To make them appear as superscript and subscript, you’ll need to use the vertical-align property in your CSS.<\/p>\n
.super{\n vertical-align: super;\n }\n .sub{\n vertical-align: sub;\n }<\/pre>\n
Your initial results should look like this:<\/p>\n
\"Screen<\/p>\n
As you can see, using the vertical-align property aligns the super or sub text either above or below the regular text, depending on whether use use the sub or super value. To make the text appear more like the footnotes its meant to be, you can also change the font-size to make it smaller. See the results of changing the font size to 11px below:<\/p>\n
\"Screen<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
With CSS3’s vertical-align property, its super easy to create superscript and subscript effects in your HTML text. Often this is done by using inline HTML tags, but that’s not really a great practice. Using CSS rather than HTML to achieve […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2776,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,173,174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3014"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3014"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3014\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2776"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}