本文详解如何为水平滚动标签栏添加「文字右侧渐隐」效果——通过伪元素叠加线性渐变遮罩，解决纯 background: linear-gradient 无法直接作用于文字的问题。
本文详解如何为水平滚动标签栏添加「文字右侧渐隐」效果——通过伪元素叠加线性渐变遮罩，解决纯 `background: linear-gradient` 无法直接作用于文字的问题。
在构建 YouTube 类项目时，常需复现其推荐区上方的横向标签栏（如“全部”“来源：XXX”“相似视频”等），并要求内容超出容器宽度时可滚动，且右侧边缘呈现自然淡出效果——这并非简单给文字加背景渐变即可实现，因为 CSS 的 linear-gradient 不能直接作为文字颜色的渐变（color 不支持渐变值），而 background-clip: text + -webkit-text-fill-color: transparent 方案在滚动容器中易出现渲染错位或兼容性问题。
✅ 推荐方案是：使用绝对定位的伪元素（::after）覆盖在内容区域右端，施加从透明到不透明的水平渐变，形成视觉上的“文字渐隐”假象。该方法稳定、兼容性好（支持所有现代浏览器），且与滚动逻辑完全解耦。
以下是完整实现代码：
<div id="bw1">
<div id="bw2">
<div class="button" onclick="barActive(this)">Wszystkie</div>
<div class="button" onclick="barActive(this)">Źródło: Ixo Music</div>
<div class="button" onclick="barActive(this)">Podobne</div>
<div class="button" onclick="barActive(this)">Na żywo</div>
<div class="button" onclick="barActive(this)">Ostatnio przesłane</div>
<div class="button" onclick="barActive(this)">Obejrzane</div>
</div>
</div>/* 外层容器：承载渐隐遮罩 */
#bw1 {
position: relative;
width: 100%;
height: 2.5rem; /* 略高于按钮高度，确保遮罩覆盖完整 */
}
/* 遮罩层：覆盖在内容最上方右侧 */
#bw1::after {
content: '';
position: absolute;
top: 0;
left: auto; /* 关键：配合 right 使用 */
right: 0;
bottom: 0;
width: 80px; /* 渐隐宽度，可根据设计调整 */
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
pointer-events: none; /* 确保不拦截鼠标事件 */
z-index: 2;
}
/* 滚动容器：内联弹性布局 */
#bw2 {
display: flex;
align-items: center;
gap: 0.6em;
font-size: 0.9em;
overflow-x: auto;
white-space: nowrap;
padding-right: 80px; /* 为遮罩预留空间，避免文字被裁切 */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
#bw2::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* 按钮基础样式 */
.button {
background-color: rgb(211, 211, 211);
color: black;
border-radius: 0.8em;
padding: 0.4rem 0.75rem;
cursor: pointer;
white-space: nowrap;
min-width: max-content;
transition: background-color 0.2s;
}
.button:hover {
background-color: #e0e0e0;
}? 关键要点说明：
- #bw1 必须设为 position: relative，使 ::after 能相对于它进行绝对定位；
- #bw1::after 的 right: 0 + width: 80px 精确控制渐隐区域起始位置和范围；
- #bw2 添加 padding-right: 80px 是为了防止文字内容被遮罩“吃掉”，确保可读性；
- 隐藏滚动条采用三端写法（WebKit / MS / Firefox），保证跨浏览器一致性；
- 建议为按钮添加 min-width: max-content 和 white-space: nowrap，避免换行破坏布局。
? 进阶提示： 若需响应式适配（如小屏下渐隐宽度减半），可用媒体查询动态调整 #bw1::after 的 width 和 #bw2 的 padding-right；若标签数量极少、无需滚动，可结合 @media (max-width: 768px) 移除遮罩以提升简洁性。
此方案已在实际 YouTube 克隆项目中验证稳定运行，兼顾语义清晰、维护性强与视觉还原度，是实现专业级渐隐导航栏的首选实践。
