CSS：音量滑块边缘的小旋钮

Question

我正在使用FlowPlayer播放流。这些年来，我们决定放弃我们的Flash播放器，转而使用HTML5播放器。

我面临的问题是新的HTML5皮肤看起来应该像闪存一样。

Flash Skin

HTML5 Skin

剩下要做的是在音量滑块的右边缘复制那个小旋钮（圆形）。我试图创建一个元素并使其与音量条一起移动，但没有任何结果。

我真的可以使用一些帮助。

音量条代码。

<div class="fp-volumeslider">
<div class="fp-volumelevel animated" style="transition-duration: 0ms; width: 72%;">

每次用户滑动音量条时，都会设置fp-volumelevel动画宽度。

Answer 1

我认为这对你有用：

.fp-volumelevel.animated{
    position:relative;
}

.fp-volumelevel.animated::after {
    content: "";
    position: absolute;
    right: 0;
    top: -2px;
    border: solid 6px #fff;
    border-radius: 50%;
}