CSS清除 float 与:after element not working

Question

我似乎无法做到这一点。很简单，清除h4元素(widget-title)后面的float，让文本框左对齐换行。

HTML 不能更改。

这里是 fiddle :http://jsfiddle.net/j29ubvjw/

.widget-wrap {
    padding:15px;
    background-color: #EEE;
}

.widget-title {
    font-size: 18px;
    margin:-15px 0 15px -15px;
    background-color: #CCC;
    padding: 15px;
    float:left;
}

.widget-title:after {
    content: "";
    display: block;
    clear: both;
}


<div class="widget-wrap">
    <h4 class="widget-title">My Title</h4>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper</p>
    </div>
</div>

我做错了什么？

Answer 1

请注意，::after 伪元素不会在元素本身之后创建内容，而是将伪子元素附加到元素中。

换句话说，通过使用 .widget-title::after，在匹配 .widget-title 选择器的元素的内容之后附加一个伪元素。

<h4 class="widget-title">
    ::before <!--appended pseudo-element -->
    My Title
    ::after  <!--appended pseudo-element -->
</h4>

---

为了清除标题后的 float ，您可以选择下一个相邻的兄弟元素并为其设置 clear:both; 声明:

Example Here

.widget-title + * { clear: both; }

或者在这种情况下:

.widget-title + div { clear: both; }