：在css创建问题之后答案

【问题标题】：:after css is creating issues：在css创建问题之后
【发布时间】：2019-04-05 07:10:14
【问题描述】：

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

这部分我已经完成了。

但是，当客户需要更改类别名称时，就会出现问题。在附图中，它显示为“2 类”。客户可以将其更改为“男士系列”、“冬季系列”、“男士”等。

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

我还放了我应用的 css 的屏幕截图。

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

如何管理这个宽度？ :(

【问题讨论】：

标签： html css css-position

【解决方案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>

【讨论】：

请注意，我还需要管理那里的“排序依据”按钮！我不确定这是否也会在那里运作良好......
@r0nn13 为包含此内容和按部分排序的包装器提供类似的 flexbox...

【解决方案2】：

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

不过，我做了一件可以正常工作的小事 =>

对于“排序依据”部分，我将背景颜色设为白色。
对于包含类别的整行，:after line 和 Sort By 部分，我隐藏了溢出。

这很好，但只有当我能找到其他工作方法时我才会感激。

【讨论】：

您的问题已“降级”，因为寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及重现它所需的最短代码在问题本身。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建minimal reproducible example
我已经包含了所需的行为、具体问题，甚至代码。我相信我的问题也很清楚。好吧，没关系。我从这里学到了一些东西，所以我想这没什么大不了的。 :)
您需要包含实际代码 - 而不是它的图片

【解决方案3】：

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

【讨论】：