Question

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

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

JSFiddle example which demonstrates the problem

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

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

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

Answer 1

这有点像黑客但它有效。它涉及设定利润。

这是更新的小提琴

https://jsfiddle.net/j08L8a3b/1/

.scroll {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: grey;
}
.scroll::before {
  content: "◀";
  color: grey;
  margin-left: -20px;
  background-color: white;
  height: 100%;
  min-height: 100%;
}

.scroll::after {
  content: "▶";
  margin-left: 120px;
  color: grey;
  background-color: white;
}

Answer 2

在这里。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

更新。在聊天讨论之后，这里是我如何在div上设置custom scrollbars样式。请注意，截至目前，它们已被绘制，div根据内容更改大小。我对绘制滚动条而不是信任浏览器的需要背后的逻辑一无所知。 :)

如何在其所有者的末尾定位'：after'伪元素？

2 个答案: