css - 如何防止 h2 内容在 :before content? 中被破坏

Question

http://i.imgur.com/wsfUCxd.png

是的，我的 :before 图标有点问题。

我想要的是 h2 内容在水平线上，而不是在 :before 内容下的换行符之后。

有什么建议吗？

Answer 1

为图标使用 position:absolute;left:0; 并向 h2 添加图标大小的 padding-left。注意:不要忘记将 h2 的位置设置为 relative。

示例:

h2{
    position: relative;
    padding-left: 60px; /* the size of your icon plus a spacer */
}
h2:before{
    content:'';
    position:absolute;
    left:0;
    height: 50px;   /* height of your icon */
    width:50px;     /* width of your icon */
    background-image:url(img/icon.png); /* your icon */
}