难以减少边界底部和实施动画过渡

Question

我有一个导航元素，当我将鼠标悬停在它上面时，会有一个蓝色边框过渡。虽然我只能使用：hover伪元素有效地实现转换，但当我添加:: after（这是减少border-bottom和text之间的距离所必需的）时，动画将无法工作。我已经看到这样的线程（Add animation to border bottom on input）完成了，但它需要多个div和span。

如何减少边框底部与文本的距离并实现动画过渡？目前，我所拥有的是下面的内容，但动画将无法使用：after选择器，并将其分离为：hover选择器不起作用。

bst* get_counts(char *filename) {
    bst* new = create_bst();
    FILE *fp;
    char buffer[500];
    char* delim = " .,'/'\n;?><:";
    char* token;
    if (!(fp = fopen(filename, "r"))) {
        fprintf(stderr, "Could not open file.");
        exit(0);
    }

    while(fgets(buffer, 500, fp)) {
        token = strtok(buffer, delim);
        while (token) {
            wordcount* w = (wordcount*)malloc(sizeof(wordcount));
            w->count = 0;
            strcpy(w->word, token);
            bst_insert(new, (void*)w, compare_words);
            token = strtok(NULL, delim);
        }
    }

    fclose(fp);
    return new;;
}