為什麼應用粗體字體時內聯元素會在懸停時移動，偽元素如何解決這個問題？

由於粗體樣式，內聯元素在懸停時發生移動

許多開發人員遇到懸停時應用粗體字體時內聯元素發生移動的問題。例如，當清單項目具有動態文字內容時，清單可能會出現此問題。

在提供的範例中，使用 HTML 清單和 CSS 建立水平選單，並套用懸停樣式來加粗連結。然而，由於粗體字體導致元素寬度發生變化，選單項目在懸停期間發生移動。

使用偽元素的解決方案

為了解決這個問題，一個聰明的方法解決方案涉及使用不可見的偽元素來預設元素的寬度。此偽元素的內容與父元素的內容相符，並對其套用懸停樣式。透過在視覺上隱藏這個偽元素，我們可以在應用粗體懸停樣式之前有效地預先設定父元素的寬度。

這是修改後的 CSS 程式碼：

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

透過添加偽元素-元素和對應的懸停樣式，元素的寬度在應用粗體樣式之前預先設定。因此，選單項目在懸停期間將不再移動。

使用和注意事項

每個連結的標題屬性值應與其預期的懸停文字相符。這可確保偽元素為每個連結正確預設寬度。

需要注意的是，此解決方案專門適用於具有動態文字內容的內聯元素。對於更複雜的元素或場景，可能需要替代方法。

以上是為什麼應用粗體字體時內聯元素會在懸停時移動，偽元素如何解決這個問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！