How to properly centre CSS pseudo elements in their base element

Question

I created a circle in CSS and I created another circle using pseudo-elements 'after'. but the created pseudo-element circle is not properly centred in the main circle.

can someone tell me what are the different ways to centre pseudo elements?

Thanks.

.main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.first{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(202, 202, 202);
    cursor: pointer;
    box-shadow: 0 0 6px 1px #e8eef6;
    position: relative;
}

.first::after{
    content: '';
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: rgb(78, 78, 78);
    position: absolute;
}

<div class="main">
        <div class="first"></div>
         </div>

score 1 · Answer 1 · answered Sep 17 '22 at 06:19

You'll have to use the transform property and translate method and you'll also need top and left properly.

with top: 50%; we'll set top position to 50% and with left: 50%; we'll set left position to 50%

then with transform: translate(-50%, -50%); we'll change horizontal and vertical directions.

so the below combination is generally used to center alignement with position absolute.

 top: 50%;
left: 50%;
transform: translate(-50%, -50%);

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.first {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgb(202, 202, 202);
  cursor: pointer;
  box-shadow: 0 0 6px 1px #e8eef6;
  position: relative;
}

.first::after {
  content: '';
  height: 70px;
  width: 70px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgb(78, 78, 78);
  position: absolute;
}

<div class="main">
  <div class="first"></div>
</div>

score 0 · Accepted Answer · answered Sep 17 '22 at 07:04

You're already using flex, so stick with it:

.first {
  display: flex;
  place-content: center;
  place-items: center;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.first {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgb(202, 202, 202);
  cursor: pointer;
  box-shadow: 0 0 6px 1px #e8eef6;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
}

.first::after {
  content: '';
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background-color: rgb(78, 78, 78);
}

<div class="main">
  <div class="first"></div>
</div>

How to properly centre CSS pseudo elements in their base element

2 Answers2