新行溢出文本的保证金

Question

我有Html，如下所示

<h4 class="clickbelow">This is very long line. Which overflows to new line when width is small.</h4>

以下是我使用的CSS

.clickbelow:before {
    content: url("http://i.stack.imgur.com/lBFti.png");
    top: 10px;
    position: relative;
}

所以当文本溢出到新行时，我希望第二行文本与第一行的边距相同。现在它在content image。

之下

小提琴：http://jsfiddle.net/hdbwkcmq/

Answer 1

:before CSS-3功能在常规内容之前设置内容，就像它说的那样。

我认为有两种可能的方式：

首先使用项目符号列表： 使用list-style-image设置图像，并使用额外的css类.like-h4将字体设置为H4。

第二：使用额外的容器： 在h4附近，您可以设置一个仅包含图像且图像宽度为padding-left的额外容器。

Answer 2

以下插件帮助用户实现了他想要的目标。

http://plnkr.co/edit/Z1m7dOAYe6NDPsZl9RSI?p=preview

我在css中添加了以下更改：

.clickbelow:before {
    content: url("http://i.stack.imgur.com/lBFti.png");
    top: 0;
    left: -8px;
    position: absolute;
}

h4{
  padding-left:25px;
  position:relative;
}

编辑：对css本身做了一些小改动。