CodePen

HTML

            
              <nav class="breadcrumb clear">
  <ul>
    <li>
      Home
    </li>
    <li>
      Skills
    </li>
    <li>
      CSS
    </li>
  </ul>
</nav>
            
          
!
via HTML Inspector

CSS

            
              .breadcrumb
{
	padding: .1em;
	background: hsla(212, 40%, 50%, .85);
}

.breadcrumb li
{
	padding: .05em .25em;
	float: left;
	color: #444;
	font-size: 1.6em;
  list-style-type: none;
}

.breadcrumb li:after
{
	content: '›';
	display: inline;
	font-size: 1.2em;
	color: #AAA;
	
	padding: 0 .0725em 0 .15em;
}

.breadcrumb li:last-child:after
{
	content: '';
}

.breadcrumb ul /* use as midair border */
{
  border: 1px solid #444;
  padding: 0;
  margin: .25em 0;
}

.clear:after,
.clear:before
{
	content: '';
	display: table;
}

.clear:after
{
	clear: both;
}

.clear
{
	display: inline-block;
	display: block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................