CSS content before block with padding
Is it possible/how do I:
Remove the padding when using a CSS content/before selector/property?
E.g. given the follow code, how can I make the bottom paragraph look like the top on (with no white space between the content:before
) but retain the padding on the paragraph.
Code: http://jsfiddle.net/569Ed/2/
HTML5:
<div class="no-pad开发者_开发百科ding">
<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 lastest and greatest browsers only, so HTML5 and CSS3/LESS is preferred)
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?
精彩评论