Benny Sutton is 4 hire - just click here

Breadcrumbs with CSS

Style breadcrumb links for your website. It works by styling list elements displaying them inline

See the working demo below.

Demo: How to create Breadcrumbs with CSS

CSS

Edit as necessary.

           
            body{
              font-size:2em;
              font-weight:bold;
            }
            ul.breadcrumb {
              padding: 10px 16px;
              list-style: none;
              background-color: #eee;
            }
            ul.breadcrumb li {
              display: inline;
              font-size: 18px;
            }
            ul.breadcrumb li+li:before {
              padding: 8px;
              color: black;
              content: "/\00a0";
            }
            ul.breadcrumb li a {
              color: #0275d8;
              text-decoration: none;
            }
            ul.breadcrumb li a:hover {
              color: #01447e;
              text-decoration: underline;
            }
        
    

Conclusion

A few lines of CSS is all you need to create breadcrumbs with css