User:Mcint/WikiStyling

Link underline animation, on mouseover

From https://romgrk.com/posts/optimizing-javascript, the snippet following provides a nice effect. Eye catching, a little unique, not too distracting. Enticing.

.markdown-content a {
    color: var(--color-link-fg);
    text-decoration: none;
    background: linear-gradient(to right, var(--color-link-fg), var(--color-link-fg)), linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
    background-size: 100% 1px, 0 1px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size .4s;
}