为何伪元素插入的紫色方块图片未按设置高度显示？

核心原因 #

1. 伪元素图片尺寸失效：用content: url()插入图片时，伪元素默认是inline替换元素，设置的width和height无法强制覆盖图片原始尺寸，导致紫色方块（伪元素）没有按预期的56px高度显示。
2. 容器高度被内容撑开：.motivo设置了固定height:56px，但内部的py-3/py-1是上下内边距，加上多行文字的高度，总尺寸超过了56px，容器被强行撑开，破坏了固定高度设置。

修复方案 #

1. 改用背景图实现紫色方块

将伪元素的图片从content插入改为背景图，能精准控制尺寸：

.motivo::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%; /* 继承容器高度，适配不同高度的容器 */
  width: 56px;
  background: url('https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg') no-repeat center / cover;
  border-radius: 15px 0 0 15px; /* 对齐容器左侧圆角 */
}

2. 优化容器高度与内边距

取消固定高度，改用最小高度适配多行文字，同时给文字留出左侧空间避免被紫色方块遮挡：

.motivo {
  width: 311px;
  background-color: gray;
  border-radius: 15px;
  min-height: 56px; /* 保证最小高度，同时支持内容撑开 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 8px 64px; /* 左侧留足够空间给紫色方块 */
}

同时移除HTML中.motivo标签上的py-3、py-1类，用统一的padding控制内边距。

3. 确保盒模型正确（可选）

如果未引入Bootstrap，需手动设置全局盒模型，避免padding撑开容器：

* {
  box-sizing: border-box;
}

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