blogben/assets/styles/liens.css

main a {
    color: #3498db; /* Couleur de base */
    text-decoration: none; /* Enlève le soulignement */
    font-weight: 500;
    position: relative; /* Pour positionner le pseudo-élément */
    transition: color 0.3s ease; /* Transition pour changement de couleur */
}

main a::after {
    content: ''; /* Pas de contenu textuel */
    position: absolute;
    left: 0;
    bottom: -2px; /* Légèrement sous le texte */
    width: 0;
    height: 2px;
    background-color: #3498db; /* Couleur de la ligne */
    transition: width 0.3s ease; /* Animation de l'effet sous le texte */
}

main a:hover {
    color: #2980b9; /* Couleur lors du survol */
}

main a:hover::after {
    width: 100%; /* Ligne apparaît sous le texte */
}

main a:active {
    color: #1c6a9e; /* Couleur lors du clic */
    transition: color 0.1s ease; /* Raccourcit la transition */
}

main a:focus {
    outline: none;
    box-shadow: 0 0 3px rgba(52, 152, 219, 0.5); /* Petit halo bleu clair */
}

main h1 a::after {
    content: ''; /* Pas de contenu textuel */
    position: absolute;
    left: 0;
    bottom: 0px; /* Légèrement sous le texte */
    width: 0;
    height: 0px;
    background-color: #ffffff; /* Couleur de la ligne */
}