html - 使用 :before 缩进 Div 中的换行符

Question

我有一个带有 :before 的 div元素和一些用 <br/> 分隔的行.

代码是这样的

<div class="foo">
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet
</div>

CSS是这样的

.foo:before {
    content: "X";
    display: "inline-block";
    width: 16px;
    height: 16px;
}

您可以在此处访问 fiddle http://jsfiddle.net/petrabarus/g5929/

正如你所看到的，元素将像这样显示

X Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

有没有办法让第二行和下一行的显示像第一行一样缩进？

应该是这样的。

X Lorem ipsum dolor sit amet
  Lorem ipsum dolor sit amet
  Lorem ipsum dolor sit amet
  Lorem ipsum dolor sit amet

Answer 1

你应该这样做:

HTML

<div class="foo">
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet<br/>
    Lorem ipsum dolor sit amet
</div>

CSS

.foo {
    margin-left:20px;
    position: relative;

}
.foo:before {
    content: "X";
    display: inline-block;
    width: 16px;
    height: 16px;
    position:absolute;
    left: -20px;
    top: 0px;
}

DEMO