after pseudo element is not appearing

<div class="parent">
  <img src='https://unsplash.it/500/500' class="logo" />
  <div>
    <h4 class="title">Paolo Cannone</h4>
    <span>24k listeners </span>
  </div>
</div>

<div class="parent">
  <img src='https://unsplash.it/500/500' class="logo" />
  <div>
    <h4 class="title">Paolo Cannone</h4>
    <span>24k listeners </span>
  </div>
</div>

.parent {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.logo {
  height: 3rem;
  width: 3rem;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
}
.logo::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background: red;
  outline: 2px solid red;
  position: absolute;
  top: 0;
  z-index: 100000;
}

.title {
  font-weight: 900;
  margin-bottom: -0.3rem;
}

.parent {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.logo {
  height: 3rem;
  width: 3rem;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
}
.logo::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background: red;
  outline: 2px solid red;
  position: absolute;
  top: 0;
  z-index: 100000;
}

.title {
  font-weight: 900;
  margin-bottom: -0.3rem;
}