.wrapper {
    display: block;
    width: 100%;
    background: red;
}
.left,.right { background: #bcf; }
.left        { float: left; }
.right       { float: right; }
                

.wrapper {
    display: block;
    width: 100%;
    background: red;
}
.wrapper:after {
    content: ' ';
    display: block;
    clear: both;
}
.left,.right { background: #bcf; }
.left        { float: left; }
.right       { float: right; }
                

.sexy:before {
    content: 'Sexy Download! ';
}
.sexy:after {
    content: ' (NSFW)';
}
                

<p>
    Mystery: 
    <a href="download/sexytime.zip">
        Jason’s Pics
    </a>
</p>
<p>
    Clear: 
    <a href="download/sexytime.zip" 
       class="sexy">
        Jason’s Pics
    </a>
</p>
                

h2:before {
    position: relative;
    display: inline-block;
}
h2:nth-of-type(1):before {
  content: ''; top: -10px;
  width: 3px; height: 3px;
  margin: 0 20px 0 10px;
  background: black;
  font-size: 3px;
  box-shadow: 0 0 0 1em #000000, 
    /* ... */ 2em 4em 0 0 #000000;
}
h2:nth-of-type(2):before {
  content: '\F085';
  font-family: 'FontAwesome';
}
                

<h1>Menu</h1>
<h2>Games</h2>
<h2>Settings</h2>
                

a[href$=".zip"]:before {
  content: '\e197';
}
a[href$=".zip"]:after {
  content: ' [ZIP, ' attr(data-size) ']';
}
a[href*="maps.google"]:before,
a[href*="goo.gl/maps"]:before {
  content: '\e062';
}
a[href*="maps.google"]:after,
a[href*="goo.gl/maps"]:after {
  content: ' (map)';
}
                

<a href="download/files.zip" 
  data-size="1MB">
    Ice Cream Data</a>
<a href="http://goo.gl/maps/Re2AZ">
    Cheese Report</a>
                

p:first-of-type:first-letter {
  float: left;
  margin: 57px 8px 8px 0;
  font-family: 'Cheshire Initials';
  font-size: 4em;
}
                

<p>Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu.</p>
<p>Do not order the Skip's Scramble.</p>
                

.narwhal {
  position: relative;
  display: block;
  width: 300px;
  margin: 20px auto 10px;
}
.narwhal img {
  position: relative;
  max-width: 100%;
  border-radius: 150px;
  border: 1px solid #fff;
  z-index: 10;
}
                

<a href="#" class="narwhal">
    <img src="img/narwhal.jpg" 
         alt="Narwhal!">
</a>
                

.narwhal:before {
  content: '';
  position: absolute;
  top: 7%; left: 7%;
  width: 44%; height: 42%;
  background: rgba(60,165,255,.6);
  border-radius: 53%;
  transition: all 0.25s ease-out;
  transform-origin: 100% 102%;
  animation: spin 5.5s linear 
    reverse infinite;
  z-index: 5;
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
                

.narwhal:after {
  content: '';
  position: absolute;
  top: 4%;
  left: 6%;
  width: 48%;
  height: 46%;
  background: rgba(240,105,130,.6);
  border-radius: 55%;
  transition: all 0.25s ease-out;
  transform-origin: 97% 99%;
  animation: spin 15s 
    linear infinite;
  z-index: 8;
}
                

.narwhal:hover:before,
.narwhal:hover:after {
  top: -4%;
  left: -4%;
  border-radius: 55%;
  transform-origin: 50% 50%;
}
.narwhal:hover:before {
  width: 109%;
  height: 104%;
}
.narwhal:hover:after {
  width: 110%;
  height: 104%;
}