Geek Answers Handbook

Align the pseudo-element to the right and the vertical center

I need the image to appear in the far right corner and keep the text on the left. I also have to maintain vertical alignment.

I tried swimming directly on the ::after pseudo-element, but it destroys the vertical alignment. Any ideas?

Jsfiddle

 .holder{ width: 100%; background: tomato; height: 200px; line-height: 200px; } .holder::after{ content: ""; border: 1px solid red; background: transparent url('my-img.jpg') no-repeat; width: 30px; height: 30px; display: inline-block; } 
 <div class="holder"> Section 1 </div>
+5
source share
3 answers
  • In the .holder element .holder set position: relative for it so that any child elements or pseudo-elements can be positioned relative to themselves.
  • Set position: absolute to a pseudo-element. This will allow you to set it exactly within .holder .
  • Add right: 0 to the pseudo-element so that it moves to the right edge of .holder .
  • To vertically center the pseudo-element, we set the top: 50% property top: 50% . This moves him halfway down .holder . The problem at this stage is that it is still not centered because the top edge of the pseudo-element is in the center. Therefore, we need to move the pseudo-element half its height. We can do this in one of two ways:

Method One: Negative Margin

Since we know the height of the pseudo-element ( 30px ), we can simply set the top edge of -15px as follows: margin-top: -15px; .

Here is an example:

 .holder{ width: 100%; background: tomato; height: 180px; line-height: 180px; position: relative; } .holder::after{ content: ""; background: blue; width:30px; height: 30px; position: absolute; right: 0; top: 50%; margin-top: -15px; } 
 <div class="holder"> Section 1 </div>

Method Two: Translate

If we do not know the height of the element, we can use the translate value for the transform property to shift the pseudo-element by 50% of its height as follows: transform: translateY(-50%); (Perhaps you need to specify a browser prefix to make it work in all browsers).

Here is an example:

 .holder{ width: 100%; background: tomato; height: 180px; line-height: 180px; position: relative; } .holder::after{ content: ""; background: blue; width:30px; height: 30px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } 
 <div class="holder"> Section 1 </div>
+10
source

You can use absolute positioning in the ::after element, which allows you to control your position without affecting the flow of other elements.

To set it relative to the container, you must first specify:

 .holder { position: relative; }

Then you place the center of the image to the right. The top property sets the top of the image halfway down the container. To pull it up a bit so that it is centered, transform: translateY(-50%) added:

 .holder::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

jsFiddle: https://jsfiddle.net/3h71kzxe/4/

+4
source

Here is the script: https://jsfiddle.net/3h71kzxe/5/

 .holder{ width: 100%; background: tomato; height: 200px; line-height: 200px; position:relative; /* Added property */ } .holder::after{ content: ""; border: 1px solid red; background: transparent url('my-img.jpg') no-repeat; width:30px; height: 30px; display: block; position:absolute; /* Added property */ right:0; /* Added property */ top:0; /* Added property */ bottom:0; /* Added property */ margin: auto 0; /* Added property */ }

Explanation:

To shift: after the element from right to right: 0 is added, but before that we need to set it as absolute, and the parental position must be relative in order to do the work of the absolute position relative to the field of its parents.

top:0, bottom:0 and margin:0 auto; should make it vertically in the center, above: 0 and below: 0 will stretch the: after element to make it 100% high, but since we gave a height of 30 pixels; and margin: 0 auto; it will result in: after the element in the vertical center.

+1
source

More articles:


All Articles