Collection of free HTML and CSS <sup> & <sub> code examples (with little JS) from codepen and other resources. Update of August 2018 collection. 2 new items.

Demo image: <sup> <sub> <sup> <sub> - GIF Demo

Author

  • Carl

Links

Made with

  • HTML / CSS (SCSS)

About the code

<sup> <sub>

Simple animation for HTML <sup> & <sub> elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Complete the Story Complete the Story - GIF Demo

Author

  • Gabriele Corti

Links

Made with

  • HTML / CSS (Stylus) / JavaScript

About the code

Complete the Story

The sup and sub elements. A simple page in which you can choose between two alternatives in order to fill a multitude of sentences.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Sub & Sup

Author

  • yuanchuan

Links

Made with

  • HTML / CSS / JS (Babel)

About a code

Sub & Sup

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jessica Paoli

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

HTML Buddies Sub & Sup: Scrupble

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Sup and Sub Elements Sup and Sub Elements - GIF Demo

Author

  • Jaymie Rosen

Links

Made with

  • HTML / CSS / JavaScript

About the code

Sup and Sub Elements

Hover (click for mobile) over the sup and sub elements to reveal a tooltip.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Sub/Sup Toggle Sub/Sup Toggle - GIF Demo

Author

  • Adam Kuhn

Links

Made with

  • HTML / CSS (SCSS)

About the code

Sub/Sup Toggle

Sub/Sup toggle by click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Sup-er Dates

Author

  • Chris Rickels

Links

Made with

  • HTML / CSS (SCSS)

About the code

Sup-er Dates

Fancy dates with an 80s vibe.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css

Demo image: <sup> & <sub>: Math Sums & Products

Author

  • Leena Lavanya

Links

Made with

  • HTML / CSS / JavaScript

About the code

<sup> & <sub>

<sup> & <sub>: math sums and products.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: <sup> and <sub> <sup> and <sub> - GIF Demo

Author

  • Jason Yeung

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Animated <sup> & <sub>

Funny animation for HTML <sup> & <sub> tags.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: HTML Sub and Sup HTML Sub and Sup - GIF Demo

Author

  • Allistair Lee

Links

Made with

  • HTML / CSS / JavaScript

About the code

HTML Sub and Sup

Simple word editor.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css, jquery.js