：在css创建问题之后

Question

我一直面临着一个问题 - 我需要为电子商务网站制作一个类别页面。客户端所需的设计描述了他们需要在类别标题（动态）之后得到一条水平线。

我已经完成了这一部分。

但是，当客户端需要更改类别名称时会出现问题。在附图中，它表示“类别2”。客户可以将其更改为“男士系列”，“冬季系列”，“男士”或其他任何内容。

问题是，由于我们不知道此类别名称将占用的宽度，如何管理水平线的宽度（在红色框中突出显示）。

我还提供了我应用的css截图。

线的位置是绝对的，宽度确实需要管理。

我该如何管理这个宽度？ :(

Answer 1

使用flexbox解决问题 - 请参阅下面的示例：

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.wrapper:after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ccc;
  margin-left: 10px;
}

<h1 class="wrapper">
  category name
</h1>

Answer 2

IDK为什么我的问题降级了。

但是，我做了一件可以正常工作的小东西=>

1. 对于“排序依据”部分，我将背景颜色设置为白色。
2. 对于包含类别的整行，：在行和排序依据部分之后，我隐藏了溢出。

这工作正常，但是只有在我可以采用其他方法工作时我才会感激。

Answer 3

如果您将：after元素的宽度指定为百分比，那么它应该是动态的。由于它获得了父项的宽度（即标题），因此宽度将根据标题的百分比数量进行调整。