В какъв смисъл какво да използваш? :hover на елемента не ти ли върши работа?

Това, което можеш да направиш е :

Да създадеш псевдо-елемент преди всеки линк, който да е със съдъжание от тик като entity (например \2713), а самия елемент да стилизираш да бъде кръгъл, със зелен цвят и тн. Съответно трябва да си поиграеш да центрираш символа върху зеленото кръгче.

За hover, бих те посъветвал да го приложиш на цялото li, а не само линка, за да стане в един цвят всичко. Иначе рискуваш да се оцвети само част от реда.

Моето решение на проблема с точките на листовете е просто да им дам картинка по мое желание.

list-style: url(list_tick.png);

Аз го направих да хваща цялото съдържание по този начин:

nav ul {
    list-style: url("images/tick.png");
    list-style-position: inside;
    padding-left: 20px;
}

И един въпрос от мен: какво се използва за да те изпраща към съответния article, като цъкнеш на даден линк от nav-a?