定位前後的CSS僞代碼

-2

我有問題可以在這種樣式中定位僞元素而無邊距px; 定位前後的CSS僞代碼

div:after { 
    /*I want to be in the middle*/ 
    content: ''; 
    border-bottom: 2px solid red; 
    width: 15%; 
    position: absolute; 
    left: 0; 
} 

div:before { 
    content: ''; 
    border-bottom: 12px solid tomato; 
    width: 7%; 
    position: absolute; 
    left: 0; 
}

來源

2015-04-26 Shaxrillo

你可以告訴多一點，我似乎不清楚:) –

好吧我想在中間的一個psedo元素 – Shaxrillo

如何顯示一些代碼？我看到的只是一張黑色多邊形的圖片。這是什麼意思？ – BoltClock

-1

like so？

使用translate(x,y) 修我的回答感謝@GCyrillus

來源

2015-04-26 12:53:07 odedta

沒有任何保證金px – Shaxrillo

如何填充？：P如果沒有，我不認爲你可以。 – odedta

translate（x，x）它是https://jsfiddle.net/6mew8ksv/3/ –

你父元素需要position relative和：假點100%遠形成相反的位置

div { 
 
    position: relative; 
 
    width: 320px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    background: black 
 
} 
 
    
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 10px; 
 
    width: 50px; 
 
    height: 80px; 
 
    left: 100%; 
 
    /*left: calc(100% - 10px);*/ 
 
    transform: translateX(-10px); 
 
    background: green 
 
}

<div></div>

來源

2015-04-26 14:22:47

定位前後的CSS僞代碼

回答

相關問題