use sibling selector instead of pseudo selector

3 files changed, 5 insertions, 12 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 87b021ee7..dbe48cbaf 100644
--- 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 79b00e991..4e763d6d4 100644
--- 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 2fe8217a3..956944a8b 100644
--- 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;