当您将鼠标悬停在菜单项上时，我想给它们一个很好的下划线效果。应该有一条与下划线文本宽度相同的标准实线，但在该直线的末端应该有一条短的倾斜结束线，平滑地连接到之前的直线部分。
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: rotate()
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>