在CSS中使用斜角下划线

Question

如何在下面的图像中使用CSS中的斜角下划线？

谢谢你的任何形式的帮助。

Answer 1

你的意思是这样的http://jsfiddle.net/060Lgxk8/？

h1 { 
    font-size: 24px; 
    text-transform: uppercase; 
    font-weight: bold; 
    font-family: Arial; 
    display: inline-block; 
    padding: 0 5px 3px 0; 
    border-bottom: 3px solid #000; 
    margin: 0; 
    position: relative; 
} 
h1:after { 
    content: ""; 
    width: 15px; 
    height: 3px; 
    display: block; 
    background-color: #000; 
    position: absolute; 
    right: -13px; 
    bottom: 1px; 
    transform: rotate(-35deg); 
} 

尝试阅读本代码，以便了解它是如何工作的。不过，这很简单。

Answer 2

您可以使用:pseudo元素与border和skewx它

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul { 
 
    margin: 15px; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    margin: 5px; 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 18px; 
 
} 
 
ul li:before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 12px; 
 
    border-width: 2px; 
 
    border-style: solid; 
 
    border-color: transparent black black transparent; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    transform: skewX(-25deg); 
 
}

<ul> 
 
    <li>Home</li> 
 
    <li>Contact</li> 
 
</ul>