CSS/SCSS Inline Horizontal Separator

November 29, 2019

SCSS

I modify the following from Bootstrap’s breadcrumb.scss

.inline-sep-list {
  display: inline-flex;
  flex-wrap: wrap;
  // padding: $breadcrumb-padding-y $breadcrumb-padding-x;
  padding: 4px;
  // margin-bottom: $breadcrumb-margin-bottom;
  // @include font-size($breadcrumb-font-size);
  list-style: none;
  // background-color: $breadcrumb-bg;
  // @include border-radius($breadcrumb-border-radius);

  > li {
    // The separator between breadcrumbs (by default, a forward-slash: "/")
    + li {
      // padding-left: $breadcrumb-item-padding;
      padding-left: 4px;

      &::before {
        display: inline-block; // Suppress underlining of the separator in modern browsers
        // padding-right: $breadcrumb-item-padding;
        padding-right: 4px;
        // color: $breadcrumb-divider-color;
        // content: escape-svg($breadcrumb-divider);
        content: ' · '
      }


    }

    // 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.
    + li:hover::before {
      text-decoration: underline;
    }
    // stylelint-disable-next-line no-duplicate-selectors
    + li:hover::before {
      text-decoration: none;
    }

    // &.active {
    //   color: $breadcrumb-active-color;
    //}
  }

  .show-sep::before {
    display: inline-block; // Suppress underlining of the separator in modern browsers
    // padding-right: $breadcrumb-item-padding;
    padding-right: 4px;
    // color: $breadcrumb-divider-color;
    // content: escape-svg($breadcrumb-divider);
    content: ' · '
  }
}

NOTE: show-sep can be used for show separator on 1st item

Usage

<h3>
  Dinner
  <small>
    <ol class="inline-sep-list">
      <li> at ABC's Diner</li>
      <li>8:00PM</li>
    </ol>
  </small>
</h3>

CSS

.inline-sep-list {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 4px;
  list-style: none;
}
.inline-sep-list > li + li {
  padding-left: 4px;
}
.inline-sep-list > li + li::before {
  display: inline-block;
  padding-right: 4px;
  content: " · ";
}
.inline-sep-list > li + li:hover::before {
  text-decoration: underline;
}
.inline-sep-list > li + li:hover::before {
  text-decoration: none;
}
.inline-sep-list .show-sep::before {
  display: inline-block;
  padding-right: 4px;
  content: " · ";
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.