Fullpage.js - Dot Navigation Styling

Question

Ich versuche, die Punktnavigation für Fullpage.JS zu stylen, aber ich habe ein paar Probleme.

Hier ist eine Geige meines Codes und was ich derzeit haben: https://jsfiddle.net/my9tqcho/

Ich versuche, die „aufzufüllen“ Effekt hinzufügen, wie HERE gesehen.

Hier ist der Quellcode für die Wirkung:

.dotstyle ul { 
    position: relative; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    cursor: default; 
} 

.dotstyle li { 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0 16px; 
    width: 16px; 
    height: 16px; 
    cursor: pointer; 
} 

.dotstyle li a { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    outline: none; 
    border-radius: 50%; 
    background-color: #fff; 
    background-color: rgba(255,255,255,0.3); 
    text-indent: -999em; 
    cursor: pointer; /* make the text accessible to screen readers */ 
    position: absolute; 
} 

/* Fill up */ 
.dotstyle-fillup li a { 
    overflow: hidden; 
    background-color: rgba(0,0,0,0); 
    box-shadow: inset 0 0 0 2px rgba(255,255,255,1); 
    transition: background 0.3s; 
} 

.dotstyle-fillup li a::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    height: 0; 
    left: 0; 
    width: 100%; 
    background-color: #fff; 
    box-shadow: 0 0 1px #fff; 
    transition: height 0.3s; 
} 

.dotstyle-fillup li a:hover, 
.dotstyle-fillup li a:focus { 
    background-color: rgba(0,0,0,0.2); 
} 

.dotstyle-fillup li.current a::after { 
    height: 100%; 
} 

Bisher habe ich THIS Antwort vom Schöpfer von fullpage.js gefunden, aber ich glaube, etwas zu verpassen, und ich kann nicht herausfinden, was es ist.

Answer 1

machte ich eine Gabel Ihrer jsfiddle und bekam es hier https://jsfiddle.net/6z67g7v6/

Was Sie tun, wollen zu arbeiten setzen overflow: hidden und box-shadow: inset 0 0 0 2px white, so dass es für eine solche ‚gefüllt‘ Effekt ermöglicht.

Das Pseudo-Element-Styling ist wie der Quellcode.

Prost.