How does Bootstrap add "/" to breadcrumb components? - html

Question

Bootstrap breadcrumb components in both v3 and v4 add a "/" to list items:
http://getbootstrap.com/components/#breadcrumbs
https://v4-alpha.getbootstrap.com/components/breadcrumb/
The docs say:
Separators are automatically added in CSS through ::before and
content.
So, I looked at the source code, the relevant section showing:
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
padding-left: 0.5rem;
color: #636c72;
content: "/";
}
However, the content: "/"; only exists on the breadcrumb-item rule. Yet, it seems to work when I follow the v3 docs, which don't require a breadcrumb-item class for items inside a list:
<ol class="breadcrumb">
<li class=''>Home</li>
<li class=''>Library</li>
<li class="active">Data</li>
</ol>
JSFiddle
Why does the above HTML with the above CSS result in / separators being added to items in a .breadcrumb list even though they don't have the .breadcrumb-item class and thus can't benefit from the content: "/" rule? Inspecting the output HTML in JSFiddle shows that no bootstrap javascript magic has added a .breadcrumb-item class to my html list items.

Answer 1

link to this style at github (bootstrap v3.3.7):
https://github.com/twbs/bootstrap/blob/v3.3.7/less/breadcrumbs.less
for (bootstrap v4.0.0):
https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/scss/_breadcrumb.scss
(bootstrap v3.3.7 --> breadcrumbs.less)
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: #breadcrumb-padding-vertical #breadcrumb-padding-horizontal;
margin-bottom: #line-height-computed;
list-style: none;
background-color: #breadcrumb-bg;
border-radius: #border-radius-base;
> li {
display: inline-block;
+ li:before {
content: "#{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: #breadcrumb-color;
}
}
> .active {
color: #breadcrumb-active-color;
}
}
(bootstrap v4.0.0 --> _breadcrumb.scss)
.breadcrumb {
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $spacer-y;
list-style: none;
background-color: $breadcrumb-bg;
#include border-radius($border-radius);
#include clearfix;
}
.breadcrumb-item {
float: left;
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
padding-left: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: "#{$breadcrumb-divider}";
}
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
// without `<ul>`s. The `::before` pseudo-element generates an element
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before {
text-decoration: underline;
}
+ .breadcrumb-item:hover::before {
text-decoration: none;
}
&.active {
color: $breadcrumb-active-color;
}
}

Answer 2

In version 3 of Bootstrap, the separators are coming from:
.breadcrumb>li+li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
on line 6 of the included file breadcrumbs.less.
Hope this helps! :)

Answer 3

When you inspect the element, you get the style to be:
.breadcrumb > li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
So the above code targets all the descending <li> elements inside the .breadcrumb element.
The logic is pretty simple. The next element has a breadcrumb before.

Answer 4

There is a CSS rule like this:
.breadcrumb>li+li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}