CSS新手求助：如何在Header下方添加全屏居中的黑色通知栏

你的问题核心是header::after伪元素的默认显示模式和文本对齐设置没到位，默认伪元素是行内元素，没法直接实现文本居中，且布局逻辑需要调整。

方案一：用绝对定位实现全屏+居中（推荐） #

这种写法更直观，能精准控制通知栏在header下方的位置：

header {
  position: relative; /* 让伪元素相对于header定位 */
  margin-bottom: 1.5rem; /* 避免通知栏和header内容重叠 */
}

header::after {
  content: "全场免运费";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%; /* 定位在header正下方 */
  background: #101010;
  color: #ffffff;
  padding: 0.25rem 0;
  text-align: center; /* 文本水平居中 */
}

方案二：保留你的正负margin写法，调整显示模式 #

如果想沿用你原本的全屏思路，只需修改两个关键属性：

header::after {
  content: "全场免运费";
  display: block; /* 改为块级元素，才能生效文本对齐 */
  margin: 0 -9999rem;
  padding: 0.25rem 9999rem;
  background: #101010;
  color: #ffffff;
  text-align: center; /* 添加文本居中 */
}

关键说明 #

• 行内元素无法生效text-align: center，所以必须把伪元素设为display: block。
• 绝对定位方案里，header的position: relative是为了让伪元素的top: 100%能精准对齐到header底部。

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