Align a pseudo element to the right and vertical center

Question

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

I have tried to float right on the ::after pseudo element, but it ruins 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>

Answer 1

1. On the .holder element, set it to have position: relative so that any children or pseudo elements can be positioned relative to itself.
2. Set position: absolute on the pseudo element. This will allow you to position it precisely within .holder.
3. Add right: 0 to the pseudo element so it shifts to the right edge of .holder.
4. To vertically centre the pseudo element, we set the property top: 50%. This moves it half way down .holder. The problem at this point is its still not centred because the top edge of the pseudo element sits in the centre. So we need to move the pseudo element up by half of its own height. We can do this one of two ways:

Method One: Negative Margin

Because we know the height of the pseudo element (30px) we can simply set a top margin of -15px like this: margin-top: -15px;.

Here's 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 don't know the height of the element we can use the translate value of the transform property to shift the pseudo element up by 50% of its height like this: transform: translateY(-50%); (You may need to provide browser prefixes to get it working in all browsers).

Here's 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>

Answer 2

Here is the fiddle: 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 element on the extreme right right:0 is added but before that we need to set it's positon as absolute and parent position needs to be relative to make absolute position work relative to its parents box.

top:0, bottom:0 and margin:0 auto; are to make it center vertically, top:0 and bottom: 0 will stretch the :after element to make its height 100% but as we have given height 30px; and margin: 0 auto; it will bring the :after element in the vertical center.