一些有用的 css 属性

columns

将一个元素拆分成多列，并设置每列的宽度。

.content {
  columns: 200px 3; /* 每列的宽度为 200px，共 3 列 */
  column-gap: 12px;
}

break-inside

在浏览器中，列表项将不会被拆分到不同的列中。每个列表项将作为一个整体出现在同一列中。

.menu-list {
  break-inside: avoid;
}

使用伪元素通过 border 绘制一条直线

使用伪元素中的 content 在元素前/后添加直线时如果手动添加并不能使其自动填满父元素的剩余空间。
所以可以使用 border 配合 flex 来实现更好的效果：

<div class="title">首页</div>

.title {
  width: 100%;
  display: inline-flex; /* 设置该元素为行内flex元素 */
  padding-left: 4px;
}
.title::after {
  content: "";
  flex: 1 1 0%; /* 使用flex填满剩余空间 */
  border-top: 1px solid #ebebeb; /* 设置border作为分割线 */
  margin: 16px;
}