使用伪元素可实现CSS商品卡片中信息的视觉隐藏与替代展示。1. 通过::before创建色块覆盖内容，如将“已售数量”文字设为透明并用背景遮盖，保留DOM结构利于SEO；2. 利用::after插入“少量”等提示文本替换原信息，原数据仍存于HTML中；3. 结合overflow:hidden与伪元素内容屏蔽，如用“**”填充价格区域；4. 注意设置content、定位及z-index确保效果正确，必要时添加user-select:none防复制，并考虑aria-hidden保障无障碍访问。核心是视觉遮盖同时保留内容结构。
在制作CSS商品卡片时，如果想隐藏部分信息但又希望保持结构完整或实现特定视觉效果，可以借助伪元素 ::before 或 ::after 来辅助“遮盖”或“替换”内容，从而达到隐藏的目的。这种方式常用于保护隐私、防止复制或美化布局。
1. 使用伪元素覆盖内容（视觉隐藏）
当不想直接删除文本（比如价格、库存等），但又不希望它直接显示时，可以用伪元素生成一个色块将其覆盖。
示例：隐藏商品卡片中的“已售数量”.product-card .sales {
position: relative;
color: transparent; /* 先将文字变透明 */
z-index: 1;
}
<p>.product-card .sales::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f0f0f0; /<em> 遮盖背景色 </em>/
z-index: -1;
}
这样文字依然存在于DOM中（利于SEO或无障碍访问），但视觉上被遮住。
2. 用伪元素展示替代信息
有时不是完全隐藏，而是替换成“保密”“限量”等提示文字，这时可用伪元素插入新内容。
立即学习“前端免费学习笔记（深入）”；
.product-card .stock {
color: transparent;
position: relative;
}
<p>.product-card .stock::after {
content: "少量";
position: absolute;
left: 0;
top: 0;
color: #e43;
font-size: 12px;
}
原数据保留，展示层由伪元素控制，灵活切换。
3. 结合 clip 或 overflow 隐藏溢出内容
配合伪元素做遮罩时，也可用容器裁剪来确保不泄露。
.product-card .price {
position: relative;
display: inline-block;
overflow: hidden;
width: 80px;
}
<p>.product-card .price::before {
content: "****";
position: absolute;
left: 0;
top: 0;
background: #fff;
width: 100%;
text-align: center;
line-height: 1.4;
}
适用于动态内容需要统一屏蔽的场景。
4. 注意事项
- 伪元素必须设置 content 属性才会生效，即使为空也要写
""。 - 使用
position: relative和absolute配合定位更精准。 - 若需完全阻止复制，还需加上
user-select: none。 - 对屏幕阅读器友好性有要求时，避免仅靠视觉隐藏，应结合
aria-hidden处理。
基本上就这些。用 before/after 辅助隐藏，核心是“视觉遮盖 + 内容保留”，既灵活又不影响结构。关键是定位和层级（z-index）要设置正确。
