没有字母间距的CSS悬停边框

发布于05月24日

Css:以下内容:

.item {
font-size: 10px;
font-weight: 500;
line-height: 25px;
letter-spacing: 0.65em;
padding-left: -0.65em;
text-align: center;
text-transform: uppercase;
margin: 0 50px -1px 0;
font-style: normal;
border-bottom: 1px solid #D7D3CE;
}

.item:hover {
 border-bottom: 1px solid #000000;
}

有没有办法在悬停状态下只在最后一个字母的末尾(不包括字母间距)切掉边框？

谢谢你给的小费.

推荐答案

由于您不是在寻找过渡，因此可以依靠渐变来创建边框.将其宽度减少letter-spacing，应该是好的

.item {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.65em;
  text-transform: uppercase;
  margin: 0 50px -1px 0;
  font-style: normal;
  display: inline-block;
  background: 
   linear-gradient(var(--c,#D7D3CE) 0 0) no-repeat
   0 100%/calc(100% - .65em) 1px; /* width = (100% - .65em)  height = 1px*/
}

.item:hover {
  --c: #000000; /* update the color on hover */
}