html - 在伪之前使用填充样式

Question

html

<ul id="tabs">
<li><a href="#tab-1" class="active">Tab-1</a></li>
<li><a href="#tab-2">Tab-2</a></li>
<li><a href="#tab-3">Tab-3</a></li>
</ul>
<div class="tab-contents" id="tab-1" style="display: block;">
    some text
</div>

CSS

.tab-contents{
    background: #2b2a26;
    padding: 0px 8px;
    clear: both;
}


#tabs {
    border-collapse: separate;
    border-spacing: 4px 0;
    float: right;
    list-style: none outside none;
    margin: 0 -4px 0 0;
    padding: 0;
}
#tabs li {
    background: none repeat scroll 0 0 #000000;
    border-radius: 19px 19px 0 0;
    display: table-cell;
    height: 47px;
    margin: 0 4px;
    text-align: center;
    vertical-align: middle;
    width: 145px;
}

#tab-1:before{
    content: "";
    display: block;
    width: 200px;
    height: 200px;
    background: #f00;
    padding-top: 10px; /* not working as expected but giving padding to bottom */
}

demo

在灰色框内，红色框应该作为填充顶部。我该怎么做？

Answer 1

您可以使用 padding-top 代替 .tab-contents。

.tab-contents{
    background: #2b2a26;
    padding: 0px 8px;
    clear: both;
    padding-top: 10px;
}

Demo

或者，您可以使用 position: relative; top: 10px; 到你的 #tab-1:before 而不是 padding-top.

demo