Html 如何使：：after元素与其上一个同级元素具有相同的宽度

我有一个

容器，在

伪元素之后有一个
和一个
：：。像这样：



.container{
显示：内联块
}
.容器：：之后{
显示：块
背景：#aabbaa
内容：attr（数据标题）
线高：40px
填充：0 1rem
}    

容器应该从包含的图像中获取其宽度，而
：：after
元素应该相应地包装其内容，如下所示：


相反，after元素不换行-请参见

为动态继承图像而非文本而编辑
使用最大宽度：最小内容
：

.container
  display: inline-block
  border: 1px dashed red
  max-width: min-content
  &::after
    display:      block
    background:   #aabbaa
    content:      attr(data-caption)
    line-height:  40px
    padding:      0 1rem
    white-space:  wrap

您可以使用一些定位技巧，使用相对父元素和绝对伪元素。请看这里：

另外，您要查找的是
空白：normal
，它是默认值。（
nowrap
确实存在。）

编辑：如果您不想使用绝对定位（这样标题周围也会有边框），可以使用flexbox–

更新笔：

好的，谢谢。只是我希望图像（特别是它的宽度）是可变的，并确定整个图像的宽度。我在发布时意识到，这不是您要寻找的解决方案，只是实现了所呈现场景的结果。我以前从未使用过min content，但这似乎是一个非常好的用途。：）<代码>最小内容
正是正确执行此操作所需的。不幸的是，它根本不适用于IE。说到语义，您可能不应该对这样的内容使用伪元素。是更合适的选择。@Bailey我支持这一点。一个更重要的论点是可访问性！可能是重复的@BaileyParker，明白了，谢谢。@Lister先生你说得完全正确，我的尝试和错误把我搞糊涂了。删除了我问题的这一部分。谢谢，我删除了无用的
空格：wrap
规则。imho这种方法的问题是，标题“在”容器之外，不需要它自己的布局空间。如果您可以使用flexbox，也有一种方法可以做到这一点。用代码更新了答案——
.container
  position: relative
  ...
  &::after
    ...
    position:     absolute
    left:         0
    right:        0

.container
  display: flex
  flex-direction: column
  align-items: flex-start
  width: min-content
  ...
  &::after
    background:   #aabbaa
    content:      attr(data-caption)
    line-height:  40px
    padding:      0 1rem