讓我們看下面的例子:
.box {
display: flex;
width: 200px;
height: 250px;
background: red;
}
.box::after {
content: "";
background: green;
width: 200px;
height: 250px;
}
<div class="box"></div>
我面臨的問題是,第一個 div 位于第二個 div 中,如下圖所示:
如何解決這個問題,讓原始 div(紅色的)后跟帶有 ::after 選擇器的 div(綠色 div)
uj5u.com熱心網友回復:
您可以將父 div 的位置設定為相對,將后偽元素的位置設定為絕對,并將其左側設定為 100%,以便它從其父容器的右側開始(紅色 div)
.box {
display: flex;
width: 200px;
height: 250px;
background: red;
position: relative;
}
.box::after {
content: "";
background: green;
width: 200px;
height: 250px;
position: absolute;
left: 100%;
}
<div class="box">f</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/530261.html
標籤:css
下一篇:未指定位置時的絕對位置行為