some svg breadcrumbs tests

breadcrumbs.html

<style>
/*
forward-slash:
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 55 88">
  <path d="M5 88a5 5 0 0 1-2 0 5 5 0 0 1-2-7L46 3a5 5 0 0 1 9 5L9 86a5 5 0 0 1-4 2z"/>
</svg>

angle-bracket:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.1 55.26">
  <path d="M34.14 27.63l-31.6 18.3a5 5 0 0 0 2.49 9.33 5.11 5.11 0 0 0 2.51-.63l39-22.61a6.45 6.45 0 0 0 1.86-2 5 5 0 0 0-1.86-6.79L7.54.63a5.013 5.013 0 1 0-5 8.69l31.44 18.21z"/>
</svg>

icon font built with: https://icomoon.io/app/
woff2 converted by: https://everythingfonts.com/woff-to-woff2
*/


@font-face {
  font-family: 'custom_icons';
  src:  url('custom_icons.woff2') format('woff2'),
        url('custom_icons.woff') format('woff');
}

body {
  font-family: system-ui, sans-serif;
}

ul.list-horiz,
.breadcrumbs,
.breadcrumbs-angle {
  padding-left: 0;
  list-style-type: none;
}

ul.list-horiz > li {
  display: inline-block;
}

.breadcrumbs > li:not(:first-child),
.breadcrumbs-angle > li:not(:first-child) {
  padding-left: 1.5em;
  position: relative;
  line-height: 1;
}

.breadcrumbs > li:not(:first-child)::before {
    content: "/";
    font-family: custom_icons;
    position: absolute;
    left: 0.5em;
    font-size: 0.75em;
    top: 0.5em;
	line-height: 0.5;
}

.breadcrumbs-angle > li:not(:first-child)::before {
    content: ">";
    font-family: custom_icons;
    position: absolute;
    left: 0.75em;
    font-size: 0.5em;
    top: 1em;
	line-height: 0.25;
}

</style>

<ul class="list-horiz breadcrumbs">
  <li>Home</li>
  <li>Next Page</li>
  <li>Next Page</li>
  <li>We're Here</li>
</ul>

<ul class="list-horiz breadcrumbs-angle">
  <li>Home</li>
  <li>Next Page</li>
  <li>Next Page</li>
  <li>We're Here</li>
</ul>