如何在 CSS :before/:after 偽元素內調整圖片大小？

在CSS 中修改影像高度：before/:after 偽元素

在CSS 中，偽元素（:before 和:after）允許您增強元素的顯示，而無需直接修改其內容。然而，調整這些偽元素中的影像高度可能會帶來挑戰。

假設您希望使用圖像裝飾特定文件類型的連結。您可以使用類別定義連結並包含 CSS 規則，如下所示：

<a href="foo.pdf">

雖然這種方法有效，但它沒有考慮圖片大小不適合連結文字的可能性。

最初，您可以嘗試使用 CSS 調整 :after 圖片的大小，但不幸的是，這是不可能直接實現的。與可以使用background-size屬性縮放的背景圖像不同，偽元素不提供類似的調整大小機制。

但是，有一種解決方法允許在偽元素內進行有限的調整大小：

.pdflink:after {
    background-image: url("/images/pdf.png");
    background-size: 10px 20px;
    display: inline-block;
    width: 10px;
    height: 20px;
    content: "";
}

透過設定background-size並指定區塊的寬度和高度，您可以有效地調整:after偽元素內的圖像大小。需要注意的是，這種方法需要 :after 偽元素定義一些內容，即使它是空的 ("")。

有關更多詳細信息，請參閱 Mozilla 開發者網路 (MDN) 相容性表。

以上是如何在 CSS :before/:after 偽元素內調整圖片大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！