Skip to content

Instantly share code, notes, and snippets.

@barneycarroll
Created March 19, 2014 13:35
Show Gist options
  • Save barneycarroll/9641747 to your computer and use it in GitHub Desktop.
Save barneycarroll/9641747 to your computer and use it in GitHub Desktop.
Append ordinals via CSS rather than in markup. Requires even more HTML bytes though.
<span
class="ordinal"
data-number="22">
22
</span>
<span
class="ordinal"
data-number="0">
0
</span>
<span
class="ordinal"
data-number="0">
3453
</span>
.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;
}
@kumarharsh
Copy link

11st? :P

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment