CSS :after elements overlapped-CodePudding

HTML

<div ></div>
<div ></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?

CodePudding user response：

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 ></div>
<div ></div>