CSS element created with :before and :after doesn't show

Question

I try to show a html element like this: here

which is a square with an arrow on the bottom which i created it by using this style:

.square {
  min-width: 60px;
  height: 60px;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1db911;
  border-radius: 15px;
  font-size: 14px;
  color: #ffffff;
}

.square:after,
.square:before {
  bottom: 30%;
  left: 31%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  display: block;
}

.square:after {
  border-color: rgba(238, 238, 238, 0);
  border-top-color: #1db911;
  border-width: 10px;
  margin-left: -10px;
  display: block;
}
.square:before {
  border-color: rgba(204, 204, 204, 0);
  border-top-color: #1db911;
  border-width: 10px;
  margin-left: -10px;
  display: block;
}

but there is a problem. when i scroll horizontally the triangle stay in: here and this is my parent element: here which can scroll horizontally. I also try using position: relative for square class but there is a problem with it. its not show triangle over the square. like this: here (i colored triangle to black for show better) and this is my style for this state

.square {
  min-width: 60px;
  height: 60px;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1db911;
  border-radius: 15px;
  font-size: 14px;
  color: #ffffff;
  position: relative;
}

.square:after,
.square:before {
  bottom: -22%;
  left: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  display: block;
}

.square:after {
  border-color: rgba(238, 238, 238, 0);
  border-top-color: black;
  border-width: 10px;
  margin-left: -10px;
  display: block;
}

.square:before {
  border-color: rgba(204, 204, 204, 0);
  border-top-color: #1db911;
  border-width: 10px;
  margin-left: -10px;
  display: block;
}

<div class="square">
  <span>sample</span>
</div>

thanks!

related: https://stackoverflow.com/a/65682691/8620333 – Temani Afif Apr 14 '21 at 10:31 — Temani Afif, Apr 14 '21 at 10:31

score 1 · Accepted Answer · answered Apr 14 '21 at 08:43

Instead of using bottom, you can use top:100% and also if you want the square to be only as wide as the content, you can use inline-flex:

.square {
  min-width: 60px;
  height: 60px;
  margin-left: 5px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #1db911;
  border-radius: 15px;
  font-size: 14px;
  color: #ffffff;
  position: relative;
}

.square:after,
.square:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  display: block;
}

.square:after {
  border-color: rgba(238, 238, 238, 0);
  border-top-color: #1DB911;
  border-width: 10px;
  margin-left: -10px;
  display: block;
}

.square-container:before {
  border-color: rgba(204, 204, 204, 0);
  border-top-color: #1db911;
  border-width: 10px;
  margin-left: -10px;
  display: block;
}

<div class="square">
  <span>sample</span>
</div>

It obviously does as you can see if you run the snippet - if it doesn't work in your code then you need to create a [mcve] demonstrating what is not working as from the code provided, the above fixes the problem — Pete, Apr 14 '21 at 08:47
thank you. it didn't work because its parent width. thank for up vote question — Mohammad Hossein Dolatabadi, Apr 14 '21 at 09:00

CSS element created with :before and :after doesn't show

1 Answers1