hover effect data-letters text-align - css

Question

Hello i try to make a hover effect on my menu list with data-letters, so it' s work really good but i want to make it in text-align: right, the problem is that when i add it to my menu-item, i can' t see the data-letters :/
anyone have a solution ?
there is my code:
.link {
outline: none;
text-decoration: none;
position: relative;
color: #9e9ba4;
display:inline-block;
}
.link--over {
text-transform: uppercase;
overflow: hidden;
color: #c5c2b8;
}
.link--over:hover {
color: #c5c2b8;
}
.link--over::after {
content: '';
position: absolute;
height: 3px;
width: 100%;
top: 20%;
margin-top: -1.5px;
right: 0;
background: rgba(51,51,51,1);
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--over:hover::after {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.link--over::before {
content: attr(data-letters);
position: absolute;
z-index: 150;
overflow: hidden;
display:block;
color: #424242;
white-space: nowrap;
letter-spacing:10px;
width: 0%;
-webkit-transition: width 0.4s 0.3s;
transition: width 0.4s 0.3s;
}
.link--over:hover::before {
width: 100%;
}
.menu-item{
position:absolute;
left:50%;
margin-left:-50px;
margin-top:20%;
width:150px;
text-align:right;
}
.menu-item li {
position:relative;
width:100%;
letter-spacing:10px;
margin-bottom:40px;
}
#en-cours{
color:rgba(51,51,51,1);
}
<ul class="menu-item">
<a id="en-cours" class="link link--over" href="index.html" data-letters="works"><li>works</li></a>
<a class="link link--over" href="#" data-letters="about"><li>about</li></a>
<a class="link link--over" href="#" data-letters="contact"><li>contact</li></a>
</ul>

Answer 1

Would you be against throwing some tags between each item? I also added text-align:right to many CSS items:
.link {
outline: none;
text-decoration: none;
position: relative;
color: #9e9ba4;
display:inline-block;
}
.link--over {
text-transform: uppercase;
overflow: hidden;
color: #c5c2b8;
text-align: right;
}
.link--over:hover {
color: #c5c2b8;
}
.link--over::after {
content: '';
position: absolute;
height: 3px;
width: 100%;
top: 20%;
margin-top: -1.5px;
right: 0;
background: rgba(51,51,51,1);
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
text-align: right;
}
.link--over:hover::after {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.link--over::before {
content: attr(data-letters);
position: absolute;
z-index: 150;
overflow: hidden;
color: #424242;
white-space: nowrap;
letter-spacing:10px;
width: 0%;
-webkit-transition: width 0.4s 0.3s;
transition: width 0.4s 0.3s;
text-align: right;
}
.link--over:hover::before {
width: 100%;
text-align: right;
}
.menu-item{
position:absolute;
left:50%;
margin-left:-50px;
margin-top:20%;
width:150px;
}
.menu-item li {
position:relative;
width:100%;
letter-spacing:10px;
margin-bottom:40px;
text-align: right;
}
#en-cours{
color:rgba(51,51,51,1);
}
<ul class="menu-item">
<a id="en-cours" class="link link--over menu-item" href="index.html" data-letters="works"><li>works</li></a>
<br>
<a class="link link--over menu-item" href="#" data-letters="about"><li>about</li></a>
<br>
<a class="link link--over menu-item" href="#" data-letters="contact"><li>contact</li></a>
</ul>