Cascading Style Sheets/Breadcrumbs

From Wikibooks, open books for an open world
Jump to navigation Jump to search

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" />