如何基于不可见的幽灵内容为<div>元素设置尺寸？

要让Flex元素基于未显示的幽灵内容（而非真实内容）确定尺寸，你可以利用CSS伪元素结合visibility:hidden属性来实现，具体方案如下：

核心思路 #

通过data-*属性存储幽灵内容，用伪元素生成该内容并设置为不可见但保留布局空间，同时确保真实内容正常显示在元素上层。

修改后的CSS代码 #

.container { display: flex; width: 10em; }
.item { 
  flex-grow: 1; 
  text-align: center; 
  padding: 0.5rem 1rem;
  border: solid black 1px;
  position: relative; /* 为伪元素定位提供基准 */
}

/* 从data属性读取幽灵内容生成伪元素 */
.item[data-ghost-content]::before {
  content: attr(data-ghost-content);
  visibility: hidden; /* 隐藏内容但保留尺寸 */
  position: absolute; /* 避免伪元素挤占真实内容的空间 */
  left: 50%;
  transform: translateX(-50%); /* 和真实内容保持相同的居中对齐 */
  width: 100%;
  text-align: center;
}

/* 确保真实内容显示在伪元素上方 */
.item[data-ghost-content] {
  z-index: 1;
  background-color: white; /* 覆盖伪元素区域，避免视觉干扰 */
}

效果说明 #

• 带有data-ghost-content属性的.item元素，会根据属性值（示例中的"BCD"）计算自身尺寸
• 真实内容（示例中的"A"）会正常显示在元素中心，不会被伪元素遮挡
• 其他无幽灵内容的元素仍按自身真实内容确定尺寸

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