如何通过伪元素在li元素外部实现换行效果？

方案1：使用CSS break-before 属性 #

给需要换行的

ul {
  padding: 0; /* 清除默认内边距，避免布局偏移 */
}
li {
  display: inline-block;
  margin: 0 8px; /* 保留元素间间距 */
}
.break-before {
  break-before: always;
}

这个属性在现代浏览器中兼容性良好，能直接让目标

方案2：强制设置display: block #

如果不需要目标

.break-li {
  display: block;
}

这种方式简单直接，适合不需要该

方案3：利用外边距强制换行 #

要保留inline-block特性的同时强制换行，可以通过设置左外边距占满父容器宽度，迫使元素换行：

.break-li {
  margin-left: 100%;
}

这个方法的优势是不改变元素的display属性，完全基于布局流实现换行。

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