我該如何製作阻礙其下劃線的文本，用HTML/CSS中的空白標記「下劃線」下劃線？

Question

有什麼辦法來再現與HTML/CSS如下效果：

http://i.imgur.com/ASdXb.png

基本上我想有我鏈接文本「優先」和阻擋圍繞跨越下劃線的任何字母一些空白/邊框底部。

Answer 1

它可以做到，它看起來像一個有用的LESS mixin的完美例子。 http://jsfiddle.net/elclanrs/r6Rmh/

p { 
    display: inline-block;    
    font: bold 24px Arial; 
    border-bottom: 3px solid black; 
    text-shadow: -3px 0 white, 3px 0 white; 
    line-height: 21px; 
}