Reputation: 3077
Here's my 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>
and my css
.a:before { background-color: green; height:10px;display: block; content: " "; }
.b { border-top: solid 10px green; }
and here's the fiddle
I want the first div tag to look like the second.
I want to use :before to add border (instead of border-top) to the div tag because I'll be using patterns (images) later. But I want the padding after the border, not before. Is there a way?
I'm building a generic SCSS library to specify the top border. Users can select a solid border or a pattern - I'll have a library of patterns too. In case of pattern I guess the only option is to use :before and specify a background image with repeat-x. Therefore I want to remain consistent and use :before to specify the border and I want this border to stick to the top even if the actual tag has padding specified.
And since this is generic, I will not know what padding the tag has, so negative margins on the :before css can't be used
Upvotes: 2
Views: 1151
Reputation: 25822
I must confess that I can't understand why you don't want to go with a simple border, still here's what I'd do to mimick a border-top. I'd place a :before pseudo-element absolutely positioned to the top. Only prerequisite is to relative position the main div so the pseudo element can be placed on top.
.a:before {
background-color: green;
height:10px;
content: "";
width: 100%;
position: absolute;
top: 0;}
Here's a fiddle, hope it solves the issue, http://jsfiddle.net/gleezer/ZVUFv/1/
Upvotes: 0
Reputation: 1866
Answer UPDATED:
add padding-bottom to the a:before
and remove padding-top from DIV 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>
and
.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 }
see this jsfiddle
Upvotes: 2