- 我不确定我是不是大脑冻结了还是缺乏知识。这应该是超级直接的,但我不能让它工作:*
我有一个pseudo
元素,我希望它是positioned absolute
(这样它就从流中取出,并且不会扭曲其他元素)
和
我希望伪元素是从它的当前位置偏移,例如从它现在的位置向左偏移20 px。
我不能通过left: __px
使用典型的定位偏移,因为它会在不同的屏幕尺寸上引起问题。
有人能告诉我如何实现这一点吗?
多谢了!
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" />
2条答案
按热度按时间fzsnzjdm1#
您可以使用
transform: translateX(-150%);
将其向左移动,其中150%
表示150%
自己的宽度。尽管
position:relative
应该和left
沿着工作,如注解中所述。rqmkfv5c2#
完全不使用定位,依靠正常流量: