2

这是我的 HTML

<div class="a" style="height: 100px; background: red; padding-top: 40px">
</div>
<br/>
<br/>
<div class="b" style="height: 100px; background: red; padding-top: 40px">
</div>

和我的 CSS

.a:before { background-color: green; height:10px;display: block; content: " "; }
.b { border-top: solid 10px green; }

这是小提琴

http://jsfiddle.net/LZgYP/

我希望第一个 div 标签看起来像第二个。

我想使用 :before 将边框（而不是边框​​顶部）添加到 div 标签，因为稍后我将使用模式（图像）。但我想要边框之后的填充，而不是之前。有办法吗？

我正在构建一个通用 SCSS 库来指定顶部边框。用户可以选择实心边框或图案——我也会有一个图案库。如果是模式，我想唯一的选择是使用 :before 并使用 repeat-x 指定背景图像。因此，我想保持一致并使用 :before 来指定边框，即使实际标签指定了填充，我也希望这个边框贴在顶部。

而且由于这是通用的，我不知道标签有什么填充，所以不能使用 :before css 上的负边距

4

2 回答 2

2

答案已更新：
将 padding-bottom 添加到a:before并从中删除 padding-topDIV a

<div class="x" style="height: 100px; background: red;">
    blah blah
</div>
<br/>
<br/>
<div class="y" style="height: 100px; background: red;">
    blah blah
</div>

和

.a:before { background-color: green; height:10px;display: block; content: " ";padding-bottom:40px }
.b:before { background-color: green; height:10px;display: block; content: " ";margin-bottom:40px }

看到这个jsfiddle

于 2013-06-23T07:25:28.070 回答
0

我必须承认，我不明白为什么你不想使用简单的边框，这仍然是我模仿边框顶部的方法。我会放置一个 :before 伪元素绝对定位到顶部。唯一的先决条件是相对定位主 div，以便可以将伪元素放在顶部。

.a:before { 
    background-color: green; 
    height:10px; 
    content: ""; 
    width: 100%;
    position: absolute; 
    top: 0;}

这是一个小提琴，希望它能解决问题，http://jsfiddle.net/gleezer/ZVUFv/1/

于 2013-06-23T08:02:19.443 回答