自定義下劃線以適應內容的寬度

我正在嘗試製作一個下劃線，該長度是單詞長度的50％，並且位於該單詞被徘徊下。自定義下劃線以適應內容的寬度

儘管選擇了a，僞選擇器中的寬度仍採用nav的寬度，而不是a的寬度。

設置left屬性時，它在nav的左側是靜態的，而不是在a的左側。我需要它是相對於被徘徊的物品。

下面是相關代碼：

nav a:hover::before{ 
    position: absolute; 
    left: calc(50% - 10%); 
    bottom: 0; 
    width: 20%; 
    height: 1px; 
    background: #7b0700; 
    content: ""; 
}

和CodePen

http://codepen.io/WallyNally/pen/dXxrgj

有什麼建議？謝謝。

來源

2016-08-26 Naltroc

你究竟想要什麼下劃線？在懸停時，我會看到每個鏈接的首字母加下劃線。 – zer00ne

你快到了！

缺少部分：

nav a { 
    position: relative; 
}

沒有該線的位置的一些元件在向上DOM（與位置絕對的，相對的，固定的，或如果缺少體）。

至於50％的寬度，我會做到這一點：

nav a:hover::before { 
    position: absolute; 
    bottom: 0; 
    height: 1px; 
    background: #7b0700; 
    content: ""; 

    /* instead of width: */ 
    left: 25%; 
    right: 25%;

}

叉從代碼：http://codepen.io/anon/pen/BzXKrB

來源

2016-08-26 23:26:08 Seb

我喜歡你的解決方案爲50％的寬度，而不使用'width'屬性。另一種方法是使用CSS3 ['transform']（http://www.w3schools.com/cssref/css3_pr_transform.asp）屬性。 I.E. '寬度：50％; transform：translate（50％，50％）;' –

我儘可能使用左邊的右邊，因爲寬度：100％'當滾動條出現時它有時會表現棘手。所以對我來說這是一條通用規則，因爲在更多情況下它更安全。但是有多種方式可以到達目的地，這一切都取決於個別情況。 – Seb

當然，儘管您的解決方案似乎對多個Web瀏覽器具有更多的跨版本兼容性。如果你可以做一些沒有CSS3特定屬性的東西，那麼它可能會是更好的選擇。好的解決方案 –

自定義下劃線以適應內容的寬度

回答

相關問題