Question

在一个小实验中，我尝试使用::before伪元素替换自定义项目符号列表中的默认项目符号。这适用于Chrome 50和Firefox 46。

但是当我尝试将其与column-count结合使用时，它会在Chrome中中断。但是，Firefox会像我预期的那样显示。

这是Chrome中的一个错误（相应的Blink）我应该报告或者我在这里错过了什么，Firefox只能处理我糟糕的代码？

ul#test {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}
li {
  list-style-type: none;
}
li::before {
  content: '*';
  width: 0.7em;
  height: 0.7em;
  margin-right: -0.7em;
  display: inline-block;
  position: relative;
  left: -1em;
  background-color: blue;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<ul id="test">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Answer 1

我今天遇到了同样的问题，我的解决方案是简单地浮动:: before-Element。除此之外，我还添加了一些方便的改进：

Fiddle

＆＃13;

li {
  list-style-type: none;
  margin-left: 1.5em;
  line-height: 1.25em;
  break-inside: avoid;
}
li:before {
  content: '';
  width: 0.7em;
  height: 0.7em;
  display: block;
  float: left;
  margin: 0 .5em 0 -1.3em;
  background-color: #BBB;
  position: relative;
  top: .25em;
}

ul#withColumCountAndBefore {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

＆＃13;

<h2>ul without column count</h2>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<h2>ul with column count (using :before and float)</h2>
<ul id="withColumCountAndBefore">
  <li>1</li>
  <li>2 with a very long tail to cause a line break</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

＆＃13;

将列数与:: before一起使用

1 个答案: