-1

So, I'm trying to get an item count badge to display overlaid on my cart icon in the header. I'm using this SO answer as inspiration.

I've edited the theme to include the data-count element, and I've got what I think is correct CSS being served, but nothing ever shows up - but in a JSFiddle, it displays just fine.

The site is https://wolfsrawfood.com/. The cart icon appears in a sticky banner after the page is scrolled. I'm sure I've just got some style somewhere stomping on this, but I can't figure it out. Any help or pointers would be awesome.

JSFiddle

Brandon
  • 401
  • 2
  • 16

1 Answers1

3

The problem

You want to use pseudo-elements (i.e., ::after) on <svg> element. This is not possible and was asked many times on StackOverflow.

To see that this is the case, just move your CSS from <i> to <svg>.


Pseudo-element ::after on <i> --> working ✔

i {
  width: 100px;
  text-align: center;
  vertical-align: middle;
  position: static;
  color: #296199;
}

.cartbadge::after {
  content: attr(data-count);
  position: relative;
  background: rgba(64, 64, 64, 1);
  height: 2rem;
  top: -1.25rem;
  right: 0.5rem;
  width: 2rem;
  padding: 0.25rem 0.5rem;
  text-align: center;
  line-height: 2rem;
  font-size: 0.75rem;
  border-radius: 50%;
  color: white;
  border: 1px solid #404040;
}

.cartbadge[data-count="0"]::after {
  display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" integrity="sha512-xnwMSDv7Nv5JmXb48gKD5ExVOnXAbNpBWVAXTo9BJWRJRygG8nwQI81o5bYe8myc9kiEF/qhMGPjkSsF06hyHA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<i data-count="5" class="fa fa-shopping-cart fa-2x cartbadge"></i>

Pseudo-element ::after on <svg> --> not working ✖

Note: It's exactly the same code as above!

svg {
  width: 30px;
  text-align: center;
  vertical-align: middle;
  position: static;
  color: #296199;
}

.cartbadge::after {
  content: attr(data-count);
  position: relative;
  background: rgba(64, 64, 64, 1);
  height: 2rem;
  top: -1.25rem;
  right: 0.5rem;
  width: 2rem;
  padding: 0.25rem 0.5rem;
  text-align: center;
  line-height: 2rem;
  font-size: 0.75rem;
  border-radius: 50%;
  color: white;
  border: 1px solid #404040;
}

.cartbadge[data-count="0"]::after {
  display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" integrity="sha512-xnwMSDv7Nv5JmXb48gKD5ExVOnXAbNpBWVAXTo9BJWRJRygG8nwQI81o5bYe8myc9kiEF/qhMGPjkSsF06hyHA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<a href="/cart/">
  <svg class="svg-inline--fa fa-shopping-cart fa-w-18 fa-2x cartbadge" data-count="8" aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="shopping-cart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
    <path fill="currentColor" d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z">
    </path>
  </svg>
</a>

The solution

Make a wrapper and use ::after on it. You need to adjust your code so that content: attr(data-count); will work (in the example below I hardcoded content: '1';). Also, you might need to adjust CSS, but I solved the problem you were asking about.

a {
  text-decoration: none;
}

svg {
  width: 50px;
  text-align: center;
  vertical-align: middle;
  position: static;
  color: #296199;
}

.wrapper::after {
  content: '1';
  position: relative;
  background: rgba(64, 64, 64, 1);
  width: 10px;
  height: 10px;
  top: -15px;
  right: 15px;
  padding: 5px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.1;
  border-radius: 50%;
  color: white;
  border: 1px solid #404040;
  display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" integrity="sha512-xnwMSDv7Nv5JmXb48gKD5ExVOnXAbNpBWVAXTo9BJWRJRygG8nwQI81o5bYe8myc9kiEF/qhMGPjkSsF06hyHA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<a href="/cart/">
  <div class="wrapper">
    <svg class="svg-inline--fa fa-shopping-cart fa-w-18 fa-2x cartbadge" data-count="8" aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="shopping-cart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
      <path fill="currentColor" d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z">
      </path>
    </svg>
  </div>
</a>
Rok Benko
  • 14,265
  • 2
  • 24
  • 49