如何把一些水平偏移量與CSS的元素底部邊界？

Question

我使用bottom-border在一些a元素，我想添加一些水平偏移量的邊界。

我現在擁有的一切：

Link very cool name 
------------------- 

我想要什麼：

Link very cool name 
    ---------------- 

如何歸檔呢？僅使用a元素。

Answer 1

僞元素是理想在這裏它可以在任何你想要的時尚，顏色風格，寬度&高度......甚至低於位置鏈接文本。

a { 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 
a::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 0; 
 
    width: 75%; 
 
    height: 2px; 
 
    background: orange; 
 
}

<a href="#">Long stretch of text</a>

Answer 2

你可以試試這個：

a{ 
    text-decoration: none; 
    display:inline-block; 
} 

a:after{ 
    content: ""; 
    border-bottom: dotted 2px red; 
    width: 70%; 
    float: right; 
    padding-top: 5px; 
} 

https://jsfiddle.net/9xc0x58c/1/

Answer 3

你可以使用一個僞元素，即：元素之後，這和ABS POS它，1px的高背景顏色和選擇，你寬鏈路長度等 請問這是所需的結果？不確定爲什麼你會想要這個，但它應該達到要求的結果。

Answer 4

可以使用跨度

HTML

<a href="">Link <span class="un">very cool name</span></a> 

CSS

.un{ 
border-bottom: dotted 2px red; 
    }