Layout Cookbook - Breadcrumb example with clear intent

Author: alejalapeno

css-cookbook/breadcrumb-navigation--download.html

@@ -28,13 +28,9 @@
             padding: .5em 1em;
         }
 
-        .breadcrumb li::before {
+        .breadcrumb li:not(:first-child)::before {
             content: "→";
         }
-
-        .breadcrumb li:first-child::before {
-            content: "";
-        }
     </style>
 
 </head>
@@ -52,4 +48,4 @@
 
 </body>
 
-</html>
+</html>

css-cookbook/breadcrumb-navigation.html

@@ -24,13 +24,9 @@
             display: flex;
         }
 
-        .breadcrumb li::before {
+        .breadcrumb li:not(:first-child)::before {
             content: "→";
         }
-
-        .breadcrumb li:first-child::before {
-            content: "";
-        }
     </style>
 </head>
 
@@ -50,14 +46,10 @@
 .breadcrumb ul {
     display: flex;
 }
-    
-.breadcrumb li::before {
+
+.breadcrumb li:not(:first-child)::before {
     content: "→";
 }
-    
-.breadcrumb li:first-child::before {
-    content: "";
-}
     </textarea>
 
     <textarea class="playable playable-html" style="height: 170px;">
@@ -77,4 +69,4 @@
 </body>
 <script src="playable.js"></script>
 
-</html>
+</html>