CSS column-count布局下首列li的:before/:after伪元素显示异常

使用CSS column-count 属性实现双列布局时出现UI渲染异常：第一列<li>元素的:before、:after伪元素渲染断裂、位置错乱，第二列应用完全相同CSS样式的<li>元素伪元素显示正常。

• 异常效果参考：
• 测试环境：Chrome 102.0.5005.63 (Official Build) (64-bit)
• 在线复现地址：Fiddle在线复现

原有CSS代码 #

.two-column {
  column-count: 2;
  column-gap: 2rem;
  max-width: 100%;
}

.column-break {
  display: block;
  break-after: column;
}

.two-column li {
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  padding: 5px 0 5px 20px;
  list-style-type: none;
  list-style:none;
}

.two-column li:before {
  content: "";
  position: absolute;
  left: 0px;
  width: 15px;
  height: 0.125rem;
  background-color: rgb(195, 51, 69);
  margin-top: 0.5rem;
}

.two-column li a {
  display: block;
  position: relative;
}

.two-column li a:after {
  content: "";
  position: absolute;
  width: 15px;
  border-radius: 50%;
  height: 15px;
  top: 3px;
  background-color: rgb(195, 51, 69);
  margin-left: 5px;
}

原有HTML结构 #

<div class="two-column">
  <div>
    <p><strong>Column 1</strong></p>
    <ul>
      <li><a href="#" target="_blank">Link</a></li>
      <li><a href="#" target="_blank">Link</a></li>
      <li><a href="#" target="_blank">Link</a></li>
    </ul>
  </div>
  <span class="column-break"></span>
  <div>
    <p><strong>Column 2</strong></p>
    <ul>
      <li><a href="#" target="_blank">Link</a></li>
      <li><a href="#" target="_blank">Link</a></li>
      <li><a href="#" target="_blank">Link</a></li>
      <li><a href="#" target="_blank">Link</a></li>
    </ul>
  </div>
</div>

这是Chromium内核多列布局模块的已知渲染bug：多列容器内使用break-after: column做强制列分割时，分割点之前的定位父元素如果没有创建独立渲染层，其内部的绝对定位伪元素会错误计算定位基准，继承列分割产生的偏移值，最终出现位置错乱、渲染断裂的问题。第二列元素处于分割点之后，不受该偏移计算错误影响，因此显示正常。

选择以下任意一种方案即可解决问题：

• 方案1：强制创建独立渲染层。给多列容器内所有带position: relative的元素添加transform: translateZ(0)规则，触发浏览器为元素创建独立合成层，隔离列分割规则对伪元素定位计算的影响。补充的CSS代码如下：

  .two-column li, .two-column li a {
    transform: translateZ(0);
  }
  

• 方案2：移除强制换列的空标签。删除用于换列的<span class="column-break">节点和对应CSS规则，改为给两列的外层容器设置break-inside: avoid，让浏览器自动完成列内容分配，从根源上规避该渲染bug。补充的CSS代码如下：

  .two-column > div {
    break-inside: avoid;
  }
  

内容的提问来源于stack exchange，提问作者Kamal