CSS/SCSS Inline Horizontal Separator

.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: ' · '  }}

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

.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: " · ";}