# How To: Hover on Link-Navigation

**URL:** https://forum.bootstrapstudio.io/t/how-to-hover-on-link-navigation/9415
**Category:** Tips and Tricks
**Created:** [September 16, 2022, 1:05pm UTC](https://forum.bootstrapstudio.io/t/how-to-hover-on-link-navigation/9415 "2022-09-16T13:05:51Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![rumede](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/r/a6a055/32.png) [@rumede](https://forum.bootstrapstudio.io/u/rumede)
#### Post date: [September 16, 2022, 1:05pm UTC](https://forum.bootstrapstudio.io/t/how-to-hover-on-link-navigation/9415/1 "2022-09-16T13:05:51Z")

</div>

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

> **[Für die Gesundheitswelt der Zukunft](https://careum.ch/de/)**
>
> Careum bildet, forscht und vernetzt. Wir unterstützen Entwicklungen in der Gesundheitswelt und fördern dazu die Bildung im Gesundheits- und Sozialwesen.

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

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [September 16, 2022, 8:03pm UTC](https://forum.bootstrapstudio.io/t/how-to-hover-on-link-navigation/9415/2 "2022-09-16T20:03:36Z")

</div>

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

```auto
.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
}

```