Breadcrumbs > Back
How do I make an breadcrumbs > back?
Testing the idea of a CSS-only conversion of breadcrumbs to a "Back" link on small screens.. What is a breadcrumbs > back? How do you make a breadcrumbs > back? This script and codes were developed by Aaron Gustafson on 13 August 2022, Saturday.
Breadcrumbs > Back - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Breadcrumbs > Back</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Breadcrumbs w/o here</h1>
<ul class="breadcrumbs"> <li class="breadcrumbs__item breadcrumbs__item--first"> <a href="/">Home</a> </li> <li class="breadcrumbs__item"> <a href="/level-1">Level 1</a> </li> <li class="breadcrumbs__item breadcrumbs__item--last"> <a href="/">Level 2</a> </li>
</ul>
<h1>Breadcrumbs w/ here</h1>
<ul class="breadcrumbs breadcrumbs--with-here"> <li class="breadcrumbs__item breadcrumbs__item--first"> <a href="/">Home</a> </li> <li class="breadcrumbs__item breadcrumbs__item--penultimate"> <a href="/level-1">Level 1</a> </li> <li class="breadcrumbs__item breadcrumbs__item--last breadcrumbs__item--here"> Here </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Breadcrumbs > Back - Script Codes CSS Codes
body { min-width: 10em;
}
.breadcrumbs { border: 1px solid; list-style: none; margin: 0; padding: .5em;
}
.breadcrumbs__item { display: inline;
}
.breadcrumbs__item::after { content: ">"; font-size: .5em; margin: 0 .5em; position: relative; bottom: .25em;
}
.breadcrumbs__item--last::after { display: none;
}
@media only screen and (max-width: 20em) { .breadcrumbs__item::after { display: none; } .breadcrumbs__item a, .breadcrumbs--with-here .breadcrumbs__item--here { position: absolute; left: -999em; } .breadcrumbs__item--last a, .breadcrumbs--with-here .breadcrumbs__item--penultimate a { display: block; position: relative; left: 0; text-indent: -999em; } .breadcrumbs__item--last a::before, .breadcrumbs--with-here .breadcrumbs__item--penultimate a::before { content: "< Back"; display: block; text-indent: 0; position: absolute; left: 0; }
}
Developer | Aaron Gustafson |
Username | aarongustafson |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 2,372 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Easy Obfuscated Field | 2,393 Kb |
FAQ JS-Enhanced Tab Order | 3,573 Kb |
Validation rules jQuery plugin | 2,768 Kb |
MQ-based Content-controlled Optional Image Loading | 3,047 Kb |
Visualizing CSS Transforms | 3,155 Kb |
Pure CSS Modal | 3,569 Kb |
Pure CSS knockout arrow | 2,344 Kb |
Easy Couch Mode | 8,819 Kb |
Zoom Layouts v2 | 2,098 Kb |
Simple Compact Labels | 1,978 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Fading gradient button | Insprd | 1,713 Kb |
Alumni ECA | MatheusLima92 | 3,777 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!