CSS: petit bouton sur le bord d'un curseur de volume

Question

J'utilise FlowPlayer pour lire un flux. Au fil des ans, nous avons décidé de laisser tomber notre lecteur Flash et de passer à un lecteur HTML5.

Le problème auquel je suis confronté est que le nouveau skin HTML5 devrait ressembler au flash.

Flash Skin

HTML5 Skin

Ce qui reste à faire est de reproduire ce petit bouton (circulaire) sur le bord droit du curseur de volume. J'ai essayé de créer un élément et de le faire bouger avec la barre de volume, mais rien n'en est sorti.

Je pourrais vraiment utiliser de l'aide.

Le code de la barre de volume. La largeur animée fp-volumelevel est définie à chaque fois que l'utilisateur glisse la barre de volume.

Answer 1

Je pense que ce sera utile pour vous:

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

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