CSS实现带右侧水平线的图片框（适配可变高度，不可改HTML）

你的核心问题是当前用固定top:32px定位水平线，无法适配不同高度的图片。不需要用calc属性处理高度适配，调整定位逻辑就能完美解决：

修改后的CSS代码 #

figure.size-full {
  border: 2px solid #bcc6b4;
  padding: 0;
  position: relative; /* 设置为绝对定位的基准容器 */
}

.wp-block-image img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

.wp-block-image figcaption {
  margin-top: .5em;
  margin-bottom: 1em;
  font-style: italic;
}

figure.wp-block-image:before{
  width: calc(100vw - 100%); /* 精确计算从figure右侧到页面边缘的宽度 */
  height: 1px;
  background-color: #bcc6b4;
  display: block;
  content: "";
  position: absolute; /* 改为绝对定位 */
  top: 50%; /* 垂直方向居中对齐 */
  left: 100%; /* 从figure的右侧开始延伸 */
  transform: translateY(-50%); /* 抵消自身高度，实现精准垂直居中 */
  z-index: -1;
}

关键调整说明 #

• 给figure.size-full添加position: relative，让伪元素的绝对定位以figure为参考容器
• 将伪元素定位从relative改为absolute，配合top:50%和transform: translateY(-50%)，实现水平线与图片垂直中心对齐，完全适配任意高度的图片
• 用calc(100vw - 100%)替代固定超大宽度，避免出现横向滚动条，同时保证线条延伸到页面最右侧

修改后无需改动任何HTML，所有不同高度的图片都能自动适配右侧水平线的位置。

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