html - 如何将 ':after' 伪元素放在其所有者的末尾？

Question

我想得到这样的结果:◄ ███████ ►

是否可以用伪元素 :before 和 :after 制作箭头？

JSFiddle example which demonstrates the problem

<div class="scroll"></div>

.scroll {
  width: 100px;
}
.scroll::before {
  content: "◀";
}

.scroll::after {
  content: "▶";
}

Answer 1

在这里。

.scroll {
  width: 100px;
  background-color: grey;
  margin: 0 1.2em;
  position: relative;
  overflow: visible;
  min-height: 1.2em;
}

.scroll:before,
.scroll:after {
  position: absolute;
  color: grey;
  min-height: 1.2em;
  width: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1.3em;
  text-align: center;
}

.scroll:before {
  content: "◀";
  right:100%;
}

.scroll:after {
  content: "▶";
  left: 100%;
}

<div class="scroll"></div>

---

更新。在聊天中讨论之后，这是我的风格 custom scrollbars在一个分区上。请注意，到目前为止，它们只是被绘制，div 会根据内容更改大小。我对您需要绘制滚动条而不是信任浏览器背后的逻辑一无所知。 :)