CODEWITHSUNDEEP
htmlcsspseudo-element
Anshuman
Anshuman

Reputation: 803

Problem with alignment of pseudo elements

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:

  1. Vertically/horizontally centering a pseudo element's generated content
  2. Centering a pseudo element

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.

Upvotes: 0

Views: 589

Answers (3)

Temani Afif
Temani Afif

Reputation: 274384

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>

Upvotes: 1

Abolfazl Panbehkar
Abolfazl Panbehkar

Reputation: 708

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>

Upvotes: 1

NikxDa
NikxDa

Reputation: 4185

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>

Upvotes: 2

Related Questions