定位前后的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伪代码

回答

相关问题