Breadcrumbs

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>

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

Cascading_Style_Sheets/Breadcrumbs
 



 

Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.


Manage research, learning and skills at defaultLogic. Create an account using LinkedIn or facebook to manage and organize your Digital Marketing and Technology knowledge. defaultLogic works like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us















Warning: Unknown: write failed: No space left on device (28) in Unknown on line 0

Warning: Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (/tmp) in Unknown on line 0