css - 将内容与 before 伪选择器一起使用以强制换行

Question

通常这样的事情会强制 .free-entry 元素到一个新行...

.free-entry:before {
    content: '\A';
    white-space: pre;
}

但我遇到过无法让它工作的情况。

我有一个无序列表，在每个 li 中都有一个 .free-entry 元素。我试图将 .free-entry 元素强制到一个新行但没有运气......

li .free-entry:before {
    content: '\A';
    white-space: pre;
}

通常 display:block 可以正常工作，但是 li 是 display:table-row 所以 block 不起作用。

li {
    display:table-row;
}

这是一个fiddle为了更清楚。

Answer 1

这不起作用的原因是 .free-entry 是一个 input 元素。

input 为一个的替换元素不支持伪元素。

因此 .free-entry:before {...} 什么都不做。

参见 this post了解更多详情

作为解决方法，您可以像这样在标签上放置一个 :after 伪元素:

label:after {
    content: '\A';
    white-space: pre;
}

FIDDLE

li {
  display: table-row;
}
label:after {
  content: '\A';
 white-space: pre;
}

<ul>
  <li>
    <input type="checkbox" value="Other" name="choosemanytest_other[5]" checked="" />
    <label>Other</label>
    <input type="text" class="free-entry" value="A Tiger" />
  </li>
</ul>