使用CSS在文本下划线并在最后加上短斜线 [英] Text underline with a short slant line at the end using CSS

问题描述

当您将菜单项悬停在菜单项上时，我希望它具有很好的下划线效果.应该有一条标准的实线，其宽度与带下划线的文本的宽度相同，但是在该直线的末端，应该有一条短的倾斜终点线，该直线平滑地连接到前一个直线部分.

I would like to give my menu items a good loking underline effect when You hover over them. There should be a standard solid line with the same width as the underlined text, but at the end of that straight line there should be a short slant ending line smoothly connected to the previous straight part.

所需的效果应该是这样的:

The desired effect should be like this:

我该怎么做?

HTML:

<ul class="my-menu">
<li class="my-menu-items">Home</li>
<li class="my-menu-items">About us</li>
<li class="my-menu-items">Contact</li>
</ul>

推荐答案

您可以使用 transform:rotation()

a {
  text-decoration: none;
  border-bottom: 1px solid black;
  position: relative;
  display: inline-block;
}
a:after {
  content: '';
  position: absolute;
  right: 0; bottom: -1px;
  border-bottom: 1px solid black;
  width: 25%;
  transform: translateX(100%) rotate(45deg);
  transform-origin: 0 50%;
}

<a href="#">Home</a>

这篇关于使用CSS在文本下划线并在最后加上短斜线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！