:before & :after pseudo elements

Benefit of dynamically inserting supporting non structural objects without needlessly disrupting or cluttering DOM. One of the most obvious uses to clear floats. Here are a few additional uses.

Icons Pseudo elements are often used to insert icons allowing access to every CSS style property while the icon itself can be embedded in the background of the newly styled element.

p:before {  
    content: "";
    display: block;
    background: url("icon.svg") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

Breadcrumbs (Nav) Adding breakers dynamically can all be achieved with the :before & :after pseudo elements.

The HTML

<p>  
    <a href="#">Home</a>
    <a href="#">Team</a>
    <a href="#">Developers</a>
</p>  

The CSS

a {  
    text-decoration: none;
    font-weight: bold;
    color: #000;
}
a:after {  
    content: " |";
}
a:first-child:before {  
    content: " > ";
}
a:last-child:after {  
    content: "";
}

Arrows Directional arrow elements appended to block content. For a thorough explanation from Chris Coyier take a look here at CSS-Tricks.

The HTML

<div class="arrow-up"></div>  
<div class="arrow-down"></div>  
<div class="arrow-left"></div>  
<div class="arrow-right"></div>  

The CSS

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid blue; 
}