<h1>On the Shoulders of Giants</h1>
<ul class="credits1 credits">
	<li>Jose Vargas: <a href="http://codeitdown.com/ordered-list-css-http://codeitdown.com/ordered-list-css-styles/" target="_blank">Ordered List CSS Styles</a></li>
	<li>Roger Johannson: <a href="http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/" target="_blank">Styling Ordered List Numbers</a></li>
	<li>David McFarland: <a href="https://codepen.io/sawmac/pen/txBhK" target="_blank">Custom List Numbers</a></li>
	<li>Chris Coyier: <a href="https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/" target="_blank">Base 64 Encode of 1x1px Transparent GIF</a></li>
	<li>Chris Coyier: <a href="https://css-tricks.com/numbering-in-style/" target="_blank">Numbering in Style</a></li>
</ul>

<h1>On the Shoulders of Giants</h1>
<ul class="credits2 credits"></ul>

<h1>On the Shoulders of Giants</h1>
<ul class="credits3 credits"></ul>

<h1>On the Shoulders of Giants</h1>
<ul class="credits4 credits"></ul>

<h1>On the Shoulders of Giants</h1>
<ul class="credits5 credits"></ul>
@font-face {font-family: 'dejavu_sansbold';font-weight: normal; font-style: normal;
    src: url('dejavusans-bold-webfont.eot?#iefix') format('embedded-opentype'), 
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/358203/DejaVuSans-Bold-webfont.woff') format('woff'), 
        url('dejavusans-bold-webfont.ttf')  format('truetype'),
        url('dejavusans-bold-webfont.svg#svgFontName') format('svg');}

body {font-family:Arial,"Lucida Sans",sans-serif;margin-left:20px;background:white;}
h1 {font-size:2em;width:90%;margin-bottom:30px;margin-left:20px;padding-bottom:10px;border-bottom:4px solid black;}
a:link, a:visited {color:teal;}
ul.credits {margin-left:40px;margin-top:0px;padding-top:0px;font-size:1.15em;
		list-style:disc url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}
.credits li:before {position:relative;left:-0.5em;font-size:1.5em;color:teal;
font-family:dejavu_sansbold, serif;}
.credits li {margin-bottom:10px;}

.credits1 li:before {content: "\2638";}
.credits2 li:before {content: "\261E";font-size:1.2em;color:brown;}
.credits3 li:before {content: "\2615";color:#333;}
.credits4 li:before {content: "\2654";color:black;}
.credits5 li:before {content: "\1405";font-size:1em;color:purple;font-family:serif;}
var creditshtml = document.querySelector(".credits1").innerHTML;
for (var i=2;i<=5;i++){
  document.querySelector(".credits" + i).innerHTML = creditshtml;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.