Question

当文本在Y轴上悬停Y像素时，我正在尝试移动文本。什么更多我想移动文本，没有下划线。任何想法如何实现这一目标？

#blah:hover {
color:red;
transform: translateY(-20px);
}

http://jsfiddle.net/xUa8P/

Answer 1

这个怎么样？它不使用transform，但完成同样的事情。

我们将文本向上移动一定量（在这种情况下为3px）。为防止“下划线”边框向上移动，我们添加了相同数量的底部填充。

#blah:hover {
    position: relative;
    top: -3px;
    padding-bottom: 3px;
}

http://jsfiddle.net/c7LvB/

Answer 2

你可以使用border-bottom甚至使用其他变换属性来获得乐趣。

<p><u class="udrln"><span class="rotate">text wich would rotate</span></u>
<u class="udrln"><span class="translate">text wich would translate</span></u></p>

.udrln {
  border-bottom:1px solid;
  line-height:0.8em;
  display:inline-block;
}
.rotate {
  display:inline-block;
  transform:rotate(-5deg);
  transform-origin:left;
  text-shadow:0 0 ;
}
.translate {
  display:inline-block;
  transform: translateY(-20px);
}

演示：http://codepen.io/gc-nomade/pen/ImJjq

在Y轴上转换文本而不移动下划线？

2 个答案: