How to position (offset) absolute element from its current position (NOT from parent)?

Question

I'm not sure if I'm having a brain freeze or lack of knowledge. This should be super straight forward but I can't make it to work:

I have a pseudo element that I want to be positioned absolute (so it's taken out of the flow and doesn't distort the other elements)

AND

I want the pseudo element to be offset from its CURRENT position, eg just 20px to the left from where it is now.

I CAN'T use the typical positioning offset from the parent via left: __px because it's causing problems on different screen sizes.

Could someone please enlighten me how to achieve this?

Thanks a lot!

JSFIDDLE: https://jsfiddle.net/AlphaX/pcsa2ow6/

.x_cta_error_msg {
 line-height: 1.5; 
 background-color: lightgreen;
 padding: 10px 15px 10px 45px;
 height: 50px
}

.x_cta_error_msg::before, .x_simple_cta_error_msg::before {
 font-family: "Font Awesome 5 Free"; 
 font-weight: 900; 
 content: "\f06a";
 font-size: 18px;
 position: absolute;
}

<div style="position: relative">

  <div class="x_cta_error_msg">
    Some text that will be here to showing to the user as an info through the journey of making a booking. 
                           
       </div>
        </div>
        
        
<!-- just loading the fontawesome icon -->        
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> 

Answer 1

You can make use of transform: translateX(-150%); to move it to the left where 150% means 150% its own width.

.x_cta_error_msg {
 line-height: 1.5; 
 background-color: lightgreen;
 padding: 10px 15px 10px 45px;
 height: 50px
}

.x_cta_error_msg::before, .x_simple_cta_error_msg::before {
 font-family: "Font Awesome 5 Free"; 
 font-weight: 900; 
 content: "\f06a";
 font-size: 18px;
 position: absolute;
 transform: translateX(-150%);
}

<div style="position: relative">

  <div class="x_cta_error_msg">
    Some text that will be here to showing to the user as an info through the journey of making a booking. 
                           
       </div>
        </div>
        
        
<!-- just loading the fontawesome icon -->        
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

Although position:relative should work for you along with left as stated in comment.