使用填充块之前的CSS内容

Question

有可能/我该怎么做:

使用CSS内容/选择器/属性之前删除填充？

例如,给定以下代码,如何使底部段落看起来像顶部(在它之间没有空格content:before)但保留段落上的填充.

代码:http://jsfiddle.net/569Ed/2/

HTML5:

<div class="no-padding">
    <p>Paragraph</p>
</div>

<div class="padding">
    <p>Paragraph</p>
</div>

CSS3:

p {
    outline: 3px solid #fbb;
    outline-top: 2px solid #fbb;
    margin-bottom: 15px;
}
p:before {
    content: 'Paragraph';
    border: 1px solid #fbb;
    background-color: #fbb;
    display: block;
}

.padding p {
    padding: 10px;
}

(这仅适用于最新和最好的浏览器,因此首选HTML5和CSS3/LESS)

Answer 1

我想你可以这样做,

代码:http://jsfiddle.net/yuliantoadi/569Ed/4/

p {
    outline: 3px solid #fbb;
    outline-top: 2px solid #fbb;
    margin-bottom: 15px;
}
.padding p {
    padding: 10px;
}
p:before {
    content: 'Paragraph';
    border: 1px solid #fbb;
    background-color: #fbb;
    display: block;
}
.padding p:before {
    margin:-10px -10px 0 -10px;
}

你是这个意思吗？