How can I remove the gap when I used ::after in a div?

Question

I wanted to experiment with ::after, so I made three figures (square, circle and triangle) then put their respective after, and works fine with the circle and square however with the triangle makes a gap and I don't understand why, I tried changing the positions and displays attributes but it didn't work

.maincontainer {
  background-color: whitesmoke;
  border-radius: 1rem;
  width: 95%;
  min-height: 200px;
  margin: 0 auto;
  display: flex;
}

.maincontainer div {
  margin: 10px;
  background-color: teal;
}

.cuadrado {
  width: 100px;
  height: 100px;
}

.circulo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: yellowgreen !important;
}

.triangulo {
  width: 0px;
  border-bottom: 100px solid yellow;
  border-left: 50px solid transparent;
  background-color: transparent !important;
  border-right: 50px solid transparent;
}

.triangulo::after {
  content: "Triangulo";
  position: fixed;
  top: 120px;
  left: 28.5%;
}

.cuadrado::after {
  content: "Cuadrado";
  position: fixed;
  top: 120px;
  left: 65px;
}

.circulo::after {
  content: "circulo";
  position: fixed;
  top: 120px;
  left: 195px;
}

<div class="maincontainer">
  <div class="cuadrado"></div>
  <div class="circulo"></div>
  <div class="triangulo"></div>
</div>

The triangle is made of borders only which the others are not so it has no width and ideally should have no height. So your positioning in relation to that div will be off. — Paulie_D, Jun 18 '21 at 18:31

score 1 · Accepted Answer · answered Jun 18 '21 at 18:24

You can remove the gap by setting the height to 0px

note: I also set left: 48% just to make the triangulo word in the center

.maincontainer {
  background-color: whitesmoke;
  border-radius: 1rem;
  width: 95%;
  min-height: 200px;
  margin: 0 auto;
  display: flex;
}

.maincontainer div {
  margin: 10px;
  background-color: teal;
}

.cuadrado {
  width: 100px;
  height: 100px;
}

.circulo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: yellowgreen !important;
}

.triangulo {
  width: 0px;
  height: 0px; /* << here */
  border-bottom: 100px solid yellow;
  border-left: 50px solid transparent;
  background-color: transparent !important;
  border-right: 50px solid transparent;
}

.triangulo::after {
  content: "Triangulo";
  position: fixed;
  top: 120px;
  left: 48%;
}

.cuadrado::after {
  content: "Cuadrado";
  position: fixed;
  top: 120px;
  left: 65px;
}

.circulo::after {
  content: "circulo";
  position: fixed;
  top: 120px;
  left: 195px;
}

<div class="maincontainer">
  <div class="cuadrado"></div>
  <div class="circulo"></div>
  <div class="triangulo"></div>
</div>

How can I remove the gap when I used ::after in a div?

1 Answers1