Jump to content

Cascading Style Sheets/Breadcrumbs

From Wikibooks, open books for an open world

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

<!doctype html>
<html>
  <head>
    <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; }
    </style>
  </head>
  <body>
    <form action="./">
    <label for="url" title="Here">
      <input type="image" id="url" />
    </label>
    </form>
  </body>
</html>