use sibling selector instead of pseudo selector

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 {

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>

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;