Content in ::after not moving after being positioned abaolutely - html

Question

I am trying to add an open and close triangle to my dropdown menu using CSS ::after concept. Here's my code.
<div class="row-links-platforms-and-flavor">
<div class="website-links">
<ul class="outer-links">
<li><a>Other Links</a>
<div class="links">
<ul class="inner-links">
<li><a class="website-link" href="#"
target="_blank">Link 11</a>
</li>
<li><a class="website-link" href="#"
target="_blank">Link 2</a>
</li>
<li><a class="website-link" href="#"
target="_blank">Link 3</a></li>
</ul>
</div>
</li>
</ul>
</div>
$color-white: #fff;
$color-black: #000;
$color-grey-light: #eaeaea;
$color-grey-dark: #F2F2F2;
$color-services-light: #951D21;
$color-services-dark: #7d1119;
$color-benchmarks-light: #44546a;
$color-benchmarks-dark: #303c4a;
$color-disabled: #e8e8e8bf;
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
a {
text-decoration: none;
}
}
.website-links {
flex: 1 1 15%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.outer-links {
position: relative;
cursor: pointer;
&:hover .inner-links {
transform: scale(1, 1);
transition: all 150ms ease-in;
}
&::before {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
color: $color-services-light;
left: .5rem;
}
&:hover::before {
content: '\25B2';
position: absolute;
top: 0;
right: 0;
color: $color-services-light;
left: .5rem;
}
}
// 2022
.inner-links {
position: absolute;
border-radius: .5rem;
background-color: $color-grey-light;
z-index: 1000;
width: 20rem;
top: 100%;
right: -50%;
box-shadow: 0 0 1.5rem rgba($color-black, .15);
transform: scale(1, 0);
transform-origin: top;
transition: all 150ms ease-in 200ms;
li {
font-weight: 400;
text-align: center;
&:not(:last-child) {
border-bottom: 1px solid $color-white;
}
&:hover {
background-color: $color-white;
font-weight: 700;
}
a {
display: inline-block;
width: 100%;
padding: 1.5rem;
color: $color-black;
}
}
}
}
The triangle doesn't move to the right. If I don't give any position, the triangle appears properly at the beginning, but, I want it at the end of Other Links. What am I missing?

Answer 1

The problem you face it is , that first you set left: .5rem and after that you set right:0;
If you want to get it to the right , remove left property and add right: -.5rem or wahtever you want it :)
&::before {
content: '\25BC';
position: absolute;
top: 0;
right: -1rem;
color: $color-services-light;
/* remove it left: .5rem; */
}
Hope this explanation could helps you ...
I forgot to add and this change on hover :
&:hover::before {
content: '\25B2';
position: absolute;
top: 0;
right: -1rem;
color: $color-services-light;
/* left: .5rem; */
}
I think, right:-1rem; is what we looking for