WordPress Spacious主题：为图片滑块添加全宽带文绿色框

方法一：用CSS伪元素直接给滑块添加绿色文本框 #

不需要额外添加HTML元素，直接通过CSS给#featured-slider容器生成底部的绿色框，完全避免.inner-wrap的宽度限制：

#featured-slider::after {
  content: "你的自定义文字内容"; /* 替换成你要显示的文字 */
  display: block;
  width: 100%;
  background-color: #72BF44;
  color: #ffffff; /* 可选，设置文字颜色为白色更醒目 */
  padding: 20px 15px; /* 上下左右内边距，按需调整 */
  box-sizing: border-box;
  text-align: center; /* 可选，让文字居中显示 */
  font-size: 16px; /* 可选，调整文字大小 */
}

方法二：突破.inner-wrap限制自定义绿色框 #

如果你已经通过Gutenberg添加了自定义HTML的绿色框（比如给它加了类slider-green-box），可以用以下CSS覆盖.inner-wrap的宽度约束，让绿色框和滑块同宽：

/* 定位到滑块后的.inner-wrap里的绿色框 */
#featured-slider + .inner-wrap .slider-green-box {
  width: 100vw; /* 占满整个视口宽度 */
  margin-left: calc(-50vw + 50%); /* 让元素居中对齐视口 */
  background-color: #72BF44;
  padding: 20px 15px;
  box-sizing: border-box;
  color: #ffffff;
}

补充说明 #

• 之前给图片加border-bottom的方法问题在于：边框属于图片盒模型的一部分，会挤压图片本身的显示空间，导致变形，所以不建议用这种方式实现底部文本框。
• 两种方法都能确保绿色框和滑块宽度一致，优先推荐方法一，更简洁且不需要额外维护HTML元素。

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