CSS :after elements overlapped

HTML

<div class="star"></div>
<div class="star"></div>

CSS

.star {
  font-size: 1em;
}

.star:before,
.star:after {
  content: "";
  position: absolute;
  background: red;
  width: 1em;
  height: 1em;
}

.star:before {
  transform: rotate(0deg) skew(22.5deg, 22.5deg);
}

.star:after {
  transform: rotate(90deg) skew(22.5deg, 22.5deg);
}

I tried this code but it would only show one element in the end. How to prevent element with star class from being overlapped?

>Solution :

Your two elements are both overlapping. You need to offset the second element.

You can use .star:nth-of-type(2) to target the second element, and margin-left to offset it.

This can be seen in the following:

.star {
  font-size: 1em;
}

.star:before,
.star:after {
  content: "";
  position: absolute;
  background: red;
  width: 1em;
  height: 1em;
}

.star:before {
  transform: rotate(0deg) skew(22.5deg, 22.5deg);
}

.star:after {
  transform: rotate(90deg) skew(22.5deg, 22.5deg);
}

.star:nth-of-type(2) {
  margin-left: 30px;
}

<div class="star"></div>
<div class="star"></div>