Pseudo-Element not applying!

I’m trying to build my dog using html and css elements, and he has heart shaped ears. Why isn’t my pseudo-element working!!! I basically copied and pasted it from the heartbeat challenge…

 .right-ear{
    background-color: #4d2715;
    height: 20%;
    width: 20%;
    transform: rotate(-45deg);
  }

  .right-ear::before {
    background-color: #4d2715;
    content: "";
    border-radius: 50%;
    width: 20%;
    height: 20%;
    top: 0px;
    left: 25px;
  }

Here is my pooch in his entirety: https://codepen.io/ballek/pen/KONGzG

You are missing the position property (position: absolute;) on the pseudo-elements.

If you want to make the universal selector work with before/after pseudo-elements you have to add them to the selector. Like we do with the box-sizing “reset”.

.raymond *,
*::before,
*::after {
  position: absolute;
}
2 Likes

Sorry for the late reply, but you are a lifesaver!!