CODEWITHSUNDEEP
css
AlphaX
AlphaX

Reputation: 661

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

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" />

Upvotes: 3

Views: 3564

Answers (2)

Temani Afif
Temani Afif

Reputation: 272638

don't use positionning at all and rely on normal flow:

.x_cta_error_msg {
  line-height: 1.5;
  background-color: lightgreen;
  padding: 10px 15px 10px 45px;
  height: 50px;
  text-indent:-20px; /* all what you need */
}

.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;
}
<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
    Some text that will be here to s.

  </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" />

Upvotes: 1

Lakshya Thakur
Lakshya Thakur

Reputation: 8308

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.

Upvotes: 4

Related Questions