css - 悬停效果数据字母文本对齐

Question

你好，我试着用数据字母在我的菜单列表上制作一个悬停效果，所以它工作得很好，但我想在文本对齐中制作它:是的，问题是当我将它添加到我的菜单项，我看不到数据字母:/ 有人有解决办法吗？ 有我的代码:

.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

你会反对在每个元素之间添加一些
标签吗？我还在许多 CSS 元素中添加了 text-align:right:

.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>