CODEWITHSUNDEEP
htmlcss
Matt McCarthy
Matt McCarthy

Reputation: 484

Centering li::before content with li

I'm trying to achieve a breadcrumb navigation bar like the one pictured below (taken from Namecheap's checkout page). For simplicity's sake, pretend the shopping cart icon is a blue circle.

Breadcrumbs Navigation

I've learned by inspecting the site's code that they've made use of the ::before selector to place the horizontal line and circle notches along with the labels. I can get the line in place, but not the circles.

Here's what I have so far:

body {
  padding: 1rem;
  color: #6d6e70;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

div.step-nav-container {
  position: relative;
}

ol.step-nav {
  display: inline-block;
  width: 100%;
  margin: 2.5rem 0 0 0;
  padding: 0;
  list-style: none;
}

ol.step-nav::before {
  content: '';
  border-top: 3px solid #6d6e70;
  margin-top: -1px;
  position: absolute;
  top: 1rem;
  right: 0;
  left: 0;
  z-index: -1;
}

ol.step-nav.step-nav-4::before {
  margin: 0 12.5%;
}

ol.step-nav.step-nav-5::before {
  margin: 0 10%;
}

ol.step-nav li {
  text-align: center;
  display: relative;
  float: left;
}

ol.step-nav li::before {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  border: 3px solid #6d6e70;
  border-radius: 100%;
  position: absolute;
  top: 0.625rem;
  left: 50%;
  background-color: white;
}

ol.step-nav li.active {
  color: #8dc2c2;
}

ol.step-nav li.active::before {
  border: 3px solid #8dc2c2;
}

ol.step-nav.step-nav-4 li {
  width: 25%;
}

ol.step-nav.step-nav-5 li {
  width: 20%;
}
<div class="step-nav-container">
  <ol class="step-nav step-nav-5">
    <li>Cart</li>
    <li>Review</li>
    <li class="active">Billing</li>
    <li>Place Order</li>
    <li>Done</li>
  </ol>
 </div>
 <div class="step-nav-container">
  <ol class="step-nav step-nav-4">
    <li>Cart</li>
    <li class="active">Billing</li>
    <li>Place Order</li>
    <li>Done</li>
  </ol>
</div>

I was trying to position the circles centered with each <li> tag, but they're centered with the <ol>. I'm sure there's something simple I'm missing, but I can't seem to figure it out. Any help is appreciated.

Upvotes: 3

Views: 285

Answers (1)

N&#39;Bayramberdiyev
N&#39;Bayramberdiyev

Reputation: 3620

Here is working snippet based on your code and comments.

body {
    padding: 1rem;
    color: #6d6e70;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

div.step-nav-container {
    position: relative;
}

ol.step-nav {
    display: inline-block;
    width: 100%;
    margin: 2.5rem 0 0 0;
    padding: 0;
    list-style: none;
}

ol.step-nav::before {
    content: '';
    border-top: 3px solid #6d6e70;
    margin-top: -1px;
    position: absolute;
    top: 1rem;
    right: 0;
    left: 0;
    z-index: -1;
}

ol.step-nav.step-nav-4::before {
    margin: 0 12.5%;
}

ol.step-nav.step-nav-5::before {
    margin: 0 10%;
}

ol.step-nav li {
    text-align: center;
    
    float: left;
    position: relative;
}

ol.step-nav li::before {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    border: 3px solid #6d6e70;
    border-radius: 100%;
    position: absolute;
    top: -1.875rem;
    left: 50%;
    background-color: white;
}

ol.step-nav li.active {
    color: #8dc2c2;
}

ol.step-nav li.active::before {
    border: 3px solid #8dc2c2;
}

ol.step-nav.step-nav-4 li {
    width: 25%;
}

ol.step-nav.step-nav-5 li {
    width: 20%;
}
<div class="step-nav-container">
    <ol class="step-nav step-nav-5">
        <li>Cart</li>
        <li>Review</li>
        <li class="active">Billing</li>
        <li>Place Order</li>
        <li>Done</li>
    </ol>
</div>
<div class="step-nav-container">
    <ol class="step-nav step-nav-4">
        <li>Cart</li>
        <li class="active">Billing</li>
        <li>Place Order</li>
        <li>Done</li>
    </ol>
</div>

Upvotes: 3

Related Questions