Problem with alignment of pseudo elements

Question

The div with border: 2px solid red has 2 pseudo elements, ::before and ::after, each with border-color: green and border-color: blue respectively. I'm trying to align the green and blue circles in the centre of the red square. But unable to do so.

I've the following code:

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.loader::after,
.loader::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.loader::before {
  border: 2px solid blue;
  width: 50px;
  height: 50px;
  left: 25%;
}

.loader::after {
  border: 2px solid green;
  width: 100px;
  height: 100px;
  left: -25%;
}

<div class="loader-container">
  <div class='loader'></div>
</div>

I also searched for the solution and found these:

But they do not work for me. Please help. Thank you.

Edit The problem occurs due the different height and width of the ::before and ::after pseudo elements. Because, when height and width of both changed to the same value, then they aligned to the centre. However, I'm trying to align them in centre while keeping the height and width of each circle distinct.

score 2 · Answer 1 · answered Jan 20 '19 at 06:18

If you know the box's dimensions, you can position: absolute the peuso-elements and then center them via the transform: translate(-50%, -50%) approach. Hope that helps.

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 200px;
  height: 100px;
  position: relative;
}

.loader::after,
.loader::before {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader::before {
  border: 2px solid blue;
  width: 50px;
  height: 50px;
}

.loader::after {
  border: 2px solid green;
  width: 100px;
  height: 100px;
}

<div class="loader-container">
  <div class='loader'></div>
</div>

in my code it's indeed 2px like you can see, since blue start at 25px and end at 27px but I add 1px space with the transparent color to avoir bad effect and jagged edges (in some browsers) .. it can be less than 1px if needed — Temani Afif, Jan 20 '19 at 15:44
@TemaniAfif Start at 25px and end at 27px is 3px. `[25, 26, 27].length === 3` — NikxDa, Jan 20 '19 at 15:45
well, nevermind :x was working on some math stuffs and for me it was 27-25=2 .. need to stop doing things at the same time :s — Temani Afif, Jan 20 '19 at 15:49

score 1 · Answer 2 · answered Jan 20 '19 at 06:26

I've done some changes in your CSS, It works

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  position relative;
  width:150px;
  height:150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.loader::after,
.loader::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.loader::before {
  border: 2px solid blue;
  width: 50px;
  height: 50px;
}

.loader::after {
  border: 2px solid green;
  width: 100px;
  height: 100px;
}

<div class="loader-container">
  <div class='loader'></div>
</div>

score 1 · Accepted Answer · edited Jan 20 '19 at 15:46

In case you are intrested you can simplify your code without the need of using pseudo element:

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  height:102px;
  width:150px;
  background:
    /*circle with a radius of 25px and border 2px blue*/
    radial-gradient(circle at center,
      transparent 24px,blue 25px,blue 26px,transparent 27px),
    /*circle with a radius of 50px and border 2px green*/
    radial-gradient(circle at center,
      transparent 49px,green 50px,green 51px,transparent 52px);
}

<div class="loader-container">
  <div class='loader'></div>
</div>

Simple and best solution ever. Thank you. – Anshuman Jan 20 '19 at 08:44 — Anshuman, Jan 20 '19 at 08:44

Problem with alignment of pseudo elements

3 Answers3