Geek asks and answers

CSS content before block with padding

Is it possible / like me:

Remove padding when using CSS / before content selector / property?

eg. given the following code, how to make the bottom paragraph look like the top (without a space between content:before), but keep the indent in the paragraph.

Code: 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;
}

(this is only for the latest and largest browsers, so HTML5 and CSS3 / LESS are preferred)

+3
source share
1 answer

I think you can do it this way

code: 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;
}

Is that what you mean?

+7
source

More articles:


All Articles