如何让::after伪元素宽度与前一个兄弟元素保持一致

先看一下你的代码结构和需求：

你的HTML结构：

<div class="container" data-caption="this caption should be as wide as the image and then wrap"> 
  <img> 
</div>

对应的CSS：

.container { display: inline-block } 
.container::after { 
  display: block;
  background: #aabbaa;
  content: attr(data-caption);
  line-height: 40px;
  padding: 0 1rem;
}

你希望.container的宽度完全由内部图片决定，同时::after里的标题文本能顺着图片宽度自动换行，但实际标题却把容器撑宽了，根本不换行对吧？

问题出在哪？ #

你用了display: inline-block给容器，这种布局的宽度默认是由**所有内部内容（包括伪元素的长文本）**共同计算出来的。所以长标题会把容器撑得比图片还宽，自然就不会触发换行。

两种可行的修复方案 #

方案一：让图片约束容器宽度

给内部的<img>设置display: block，这样容器的宽度就会被图片牢牢固定住——因为块级元素的图片会独占容器的一行，容器的宽度只能等于图片的宽度。伪元素作为block元素，会自动继承容器的宽度，文本也就会自动换行：

.container {
  display: inline-block;
}
.container img {
  display: block; /* 关键：让图片成为块级元素，锁定容器宽度 */
}
.container::after {
  display: block;
  background: #aabbaa;
  content: attr(data-caption);
  line-height: 40px;
  padding: 0 1rem;
}

方案二：用绝对定位固定伪元素宽度

如果不想修改图片的显示方式，可以给容器加上position: relative，然后把伪元素设置为绝对定位，让它的左右边缘和容器对齐。这样伪元素的宽度就会和容器（由图片决定的宽度）完全一致，文本就能正常换行：

.container {
  display: inline-block;
  position: relative;
  margin-bottom: 40px; /* 给伪元素留出空间，避免覆盖下方内容 */
}
.container::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%; /* 把标题放在图片正下方 */
  display: block;
  background: #aabbaa;
  content: attr(data-caption);
  line-height: 40px;
  padding: 0 1rem;
}

这两种方法都能完美实现你的需求：容器宽度由图片决定，标题文本自动换行。

内容的提问来源于stack exchange，提问作者Alexander Presber