如何在 ::-webkit-scrollbar-button 中添加伪元素答案

【问题标题】：How to add pseudo element in ::-webkit-scrollbar-button如何在 ::-webkit-scrollbar-button 中添加伪元素
【发布时间】：2021-09-18 14:30:21
【问题描述】：

我正在尝试在 ::before 元素的帮助下制作一个带有线性背景的 webkit 按钮以及一个图标，但它没有成功。有没有可能的方法来做同样的事情？

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div class="bar2">
        <div class="nav-items">BOOKS</div>
        <div class="nav-items">SONGS</div>
        <div class="nav-items">COOK</div>
        <div class="nav-items">GAMES</div>
        <div class="nav-items">Recents</div>
      </div>
<style>
.bar2{
  display: flex;
  width: 300px;
  overflow-x: overlay;
  background: grey;
}
.nav-items{
  padding:10px;
}
.bar2::-webkit-scrollbar-track{display: none;}
.bar2::-webkit-scrollbar{background: transparent; height: 30px;}
.bar2::-webkit-scrollbar-button:single-button:horizontal:decrement{
  background: url(angle-left.svg);
  background-repeat: no-repeat;
  background-size: 15px;
}
.bar2::-webkit-scrollbar-button:single-button:horizontal:increment{
  background: linear-gradient(to left,white,#00000000);
}
.bar2::-webkit-scrollbar-button:single-button:horizontal:increment::before{
  position: absolute;
  background: url(angle-right.svg);
  background-repeat: no-repeat;
  background-size: 15px;
}
.bar2::-webkit-scrollbar-thumb{display: none;}

</style>
</body>
</html>

【问题讨论】：

请忽略愚蠢的更正（如果有）。在移动设备中编辑的代码。
请把你的代码变成一个可以运行的sn-p。

标签： html css webkit pseudo-element

【解决方案1】：

这里有一些不寻常的事情：

您可能不需要大多数这些非常具体的浏览器前缀。浏览器前缀应该是与浏览器或引擎相关的边缘情况的最后手段。
您的示例中没有按钮，请考虑使用<a href="#" class="nav-items">BOOKS</a> 标签而不是您正在使用的<div>s。如果您使用的是 Javasript，请改用 <button onclick="">。更改此设置将为您提供所有自己编写起来非常麻烦的默认浏览器行为（tabindex、键盘导航......）

但对您的问题最重要的是：

使用伪元素时，首先要设置的是content。没有它，伪元素将不会显示。 (MDN documentation)

所以要让伪代码在 .bar2 上工作，应该这样做：

  .bar2::before {
content: ''; 
display: block;
background: red;
min-width: 1rem;
height:1rem;
}

【讨论】：