悬停效果数据字母text-align

Question

您好我尝试使用数据字母在我的菜单列表上进行悬停效果，因此它是＆＃39;工作真的很好，但我想在text-align中做到：对，问题是当我把它添加到我的菜单项时，我可以＆＃39;看到数据字母：/ 谁有解决方案？ 有我的代码：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你会反对在每件物品之间扔一些标签吗？我还在许多CSS项目中添加了text-align：right：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;