use sibling selector instead of pseudo selector

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 87b021ee7fda6bac799e91c3fb66831f3278d618..dbe48cbaf0eafcfa351eb0e880d0f36be38afdab 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3289,15 +3289,11 @@ button.close {
   text-shadow: 0 1px 0 #fff;
 }
 
-.breadcrumb > li:after {
+.breadcrumb > li + li:before {
   display: inline-block;
   padding: 0 5px;
   color: #ccc;
-  content: "\00a0 /";
-}
-
-.breadcrumb > li:last-child:after {
-  display: none;
+  content: "/\00a0";
 }
 
 .breadcrumb > .active {

diff --git a/docs/components.html b/docs/components.html
index 79b00e991371c88e4299c25c9c8d8f0ee86b7503..4e763d6d4d2bf8d1a066f2c4ac769422dfd38b12 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -1016,7 +1016,7 @@ body { padding-bottom: 70px; }
       <h1>Breadcrumbs <small></small></h1>
     </div>
     <p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
-    <p>Separators are automatically added in CSS through <code>:after</code> and <code>content</code>.</p>
+    <p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
     <div class="bs-example">
       <ul class="breadcrumb">
         <li class="active">Home</li>

diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index 2fe8217a36603a4fb6aed187c80419d62e1b99d0..956944a8bacdc8077de092539a97f94d761a6cd2 100644 (file)
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -12,15 +12,12 @@
   > li {
     display: inline-block;
     text-shadow: 0 1px 0 #fff;
-    &:after {
+    &+li:before {
       display: inline-block;
-      content: "\00a0 /"; // Unicode space added since inline-block means non-collapsing white-space
+      content: "/\00a0"; // Unicode space added since inline-block means non-collapsing white-space
       padding: 0 5px;
       color: #ccc;
     }
-    &:last-child:after {
-      display: none; // No divider after last element
-    }
   }
   > .active {
     color: @gray-light;