Cascading Style Sheets/Breadcrumbs

Use the :before and :after pseudo elements with generated content to generate breadcrumbs

<!doctype html>
    <title>Breadcrumb Test</title>
    <base href="./" />
    <style type="text/css">
      label:before { content: attr(title); text-decoration: underline; color: blue; }
      label:after { content: ">"; }
      label { position:relative; }
      #url { opacity:0; position: absolute; left: 0; }
    <form action="./">
    <label for="url" title="Here">
      <input type="image" id="url" />

  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.


Manage research, learning and skills at IT1me. Create an account using LinkedIn to manage and organize your IT knowledge. IT1me works like a shopping cart for information -- helping you to save, discuss and share.

  Contact Us  |  About |  IT Training & References |  IT Careers |  IT Hardware |  IT Software |  IT Books