<nav id="breadcrumbf2">
   <ul>
     <li>
       <a href="#">Top       </a>
     </li>
     <li>
       <a href="#">Science       </a>
     </li>
     <li>
       <a href="#">Biology       </a>
     </li>
     <li>
       <a href="#">Genetics       </a>
     </li>
     <li>
       <a href="#">Genomics       </a>
     </li>
     <li>
       <span>Pharmacogenetics       </span>
     </li>   </ul> </nav> 

In head element:

<link rel="stylesheet" href="example8.css"/>

In example8.css

/*
    Order of pseudo-"a" elements:
    LoVe HAte (Link, Visited, Hover, Active
  */
   #breadcrumbf2 a:link, #breadcrumbf2 a:visited, #breadcrumbf2 a:hover, #breadcrumbf2 a:active, #breadcrumbf2 li span {
      color: navy;
      font-family: Tahoma, Arial, Helvetica, sans-serif;
      font-size: small;
      font-weight: normal;
      text-decoration: none;
  }
  #breadcrumbf2 li::after {
    content: "  \279E  ";
  }
  #breadcrumbf2 li:last-child::after {
    content: "";
  }
  #breadcrumbf2 a:hover {
      text-decoration: underline;
  }
  #breadcrumbf2 li span {
      color: black;
  }
  #breadcrumbf2 ul {
      background-color: #ddd;
      padding-left: 0px;
      margin-left: 0px;
  }
  #breadcrumbf2 ul li {
      display: inline;
  }