：在css创建问题之后

Question

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

我已经完成了这部分。

但是，当客户端需要更改类别名称时会出现问题。在附图中，它表示＆＃34;类别2＆＃34;。客户可以将其更改为“男士系列”，“冬季系列”，“男士＆＃39;男士＆＃39;男士＆＃39;男士＆＃39;或者其他什么。

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

我还提供了我已应用的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为什么我的问题降级了。

但是，我做了一件可以正常工作的小事=＆gt;

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

这种方法很好，但是只有在我可以采用其他方法工作的情况下我才会感激。

Answer 3

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