html - 带有填充的 block 之前的 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;
}

你是这个意思吗？