In the footer class of my HTML, there is a code snippet with chevrons:
<div class="link-list">
<div *ngFor="let link of insideLinksLeft | originalOrderKeyValue" class="link">
<a [href]="link.value" class="animated-link">{{link.key}} <i class="arrows-right fas fa-chevron-right fa-xs"></i></a>
</div>
</div>
I want the arrows-right to move right on hover over the animated link. Here's what I've tried:
.arrows-right {
margin-top: 13px;
margin-left: 10px;
}
.arrow-right:hover {
right: 20px;
}
The CSS for arrows-right works but not when inside an <a> tag. If you have a better solution, please let me know.
I also attempted this approach without success:
a.animated-link {
color: #D1E2FF;
&:hover {
color: white;
}
&:hover .arrow-right {
transform: translate(-50%, 0);
}
}
Below is the complete CSS page layout for reference:
@import "/src/assets/style/variables";
@background-black: #4A4A4A;
.footer-wrap {
width: 100%;
.links-footer-wrap {
padding: 50px 0;
background: @background-black;
.col {
padding: 0 45px;
border-left: 1px solid @border-gray;
&:first-child {
border: none;
padding-left: 0;
}
.col-title {
color: white;
font-size: 28px;
margin-bottom: 10px;
}
.link-list-wrap {
display: flex;
justify-content: space-between;
}
.link {
min-width: 205px;
margin-bottom: 10px;
}
a.animated-link {
color: #D1E2FF;
&:hover {
color: white;
}
&:hover .arrow-right {
transform: translate(-50%, 0);
}
}
img {
width: 100%;
margin-bottom: 10px;
}
}
}
.arrows-right {
margin-top: 13px;
margin-left: 10px;
}
.arrow-right:hover {
right: 20px;
}
.privacy-footer-wrap {
font-size: 13px;
padding: 15px 0;
background: #F7F4EE;
.privacy-footer {
display: flex;
justify-content: space-between;
.policy-link-wrap {
width: 210px;
.privacy-link {
color: @link-blue;
font-weight: bold;
&:hover {
color: @hover-blue;
}
}
}
}
}
}