barneycarroll · March 19, 2014 13:35 · kumarharsh · Jan 30, 2018
diff --git a/ordinal-suffix.html b/ordinal-suffix.html
 <span
  class="ordinal"
  data-number="22">
  22
 </span>
 <span
  class="ordinal"
  data-number="0">
  0
 </span>
 <span
  class="ordinal"
  data-number="0">
  3453
 </span>
diff --git a/ordinal-suffix.scss b/ordinal-suffix.scss
 .ordinal:after {
 	content: 'th';

 	@extend sup;
 }

 [data-number^='1'].ordinal:after {
 	content: 'st';
 }

 [data-number^='2'].ordinal:after {
 	content: 'nd';
 }

 [data-number^='3'].ordinal:after {
 	content: 'rd';
 }

 //

 sub,
 sup {
  font-size: .66666em;
  font-weight: bold;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
 }

 sup {
  top: -0.5em;
 }