How To: Hover on Link-Navigation

Tips and Tricks
1

In the Footer of these Website is a list with textlinks (Aktuell, Jobs,…):

how can i do the same in my own Page? what is the correct css-defintion to do this?

2

CSS Transitions, Transforms, before and after pseudo classes. Use Chrome Dev Tools to view the CSS…

.link-list-item-link{
    --paragraph-small-font-size:14px;
    --paragraph-small-font-weight:400;
    --paragraph-small-line-height:22px;
    --paragraph-small-letter-spacing:0.2px;
    font-family:var(--font-family-primary);
    font-size:var(--paragraph-small-font-size);
    font-weight:var(--paragraph-small-font-weight);
    letter-spacing:var(--paragraph-small-letter-spacing);
    line-height:var(--paragraph-small-line-height)
}
@media (min-width:1280px){
    .link-list-item-link{
        --paragraph-small-font-size:16px;
        --paragraph-small-line-height:24px
    }
}
.link-list-item-link:empty,.link-list-item-link:last-child{
    margin-bottom:0
}
.link-list-item{
    border-bottom:1px solid var(--c-border-light)
}
.link-list-item-link{
    color:var(--c-text);
    display:block;
    padding-top:var(--spacer-md);
    padding-bottom:var(--spacer-md);
    padding-right:30px;
    padding-left:0;
    position:relative;
    width:100%;
    word-break:break-word;
    -webkit-transition-property:padding,color;
    -o-transition-property:padding,color;
    transition-property:padding,color;
    -webkit-transition-duration:.3s;
    -o-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-timing-function:ease;
    -o-transition-timing-function:ease;
    transition-timing-function:ease
}
.link-list-item-link:after,.link-list-item-link:before{
    background:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNSA1TDEgOSIgc3Ryb2tlPSIjNTE1MTUxIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8L3N2Zz4K) no-repeat 50%;
    background-size:10px 10px;
    content:"";
    cursor:pointer;
    display:block;
    right:0;
    left:auto;
    position:absolute;
    top:50%;
    height:22px;
    margin-top:-11px;
    width:22px;
    -webkit-transition-property:opacity,-webkit-transform;
    transition-property:opacity,-webkit-transform;
    -o-transition-property:transform,opacity;
    transition-property:transform,opacity;
    transition-property:transform,opacity,-webkit-transform;
    -webkit-transition-duration:.3s;
    -o-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-timing-function:ease;
    -o-transition-timing-function:ease;
    transition-timing-function:ease
}
.link-list-item-link:before{
    right:auto;
    left:0;
    -webkit-transform:translate(-11px);
    -ms-transform:translate(-11px);
    transform:translate(-11px);
    opacity:0;
    visibility:hidden
}
.link-list-item-link:after{
    display:block;
    visibility:visible
}
.link-list-item-link:hover{
    color:var(--c-text-primary);
    padding-left:30px;
    padding-right:0
}
.link-list-item-link:hover:before{
    opacity:1;
    visibility:visible;
    -webkit-transform:translate(0);
    -ms-transform:translate(0);
    transform:translate(0);
    background:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNSA1TDEgOSIgc3Ryb2tlPSIjMTgyNDZGIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8L3N2Zz4K) no-repeat 50%
}
.link-list-item-link:hover:after{
    -webkit-transform:translate(11px);
    -ms-transform:translate(11px);
    transform:translate(11px);
    opacity:0;
    visibility:hidden
}