當使用 CSS :before 和 content 屬性來插入 SVG 圖片時,可能會遇到長寬為 0 的情況。這通常是由於缺少必要的 CSS 屬性導致的。
可能的原因如下:
-
缺少顯示屬性 (
display): 您需要確保:before元素被正確地顯示在頁面上。您可以使用display: inline-block;或display: block;等來設置元素的顯示方式。 -
缺少寬度和高度 (
width和height): 如果沒有為:before元素設置寬度和高度,它的默認值將為 0。可以使用width和height屬性來設置元素的大小,以確保 SVG 圖片正確顯示。 -
設置
content屬性: 請確保正確地設置了content屬性,並指定要插入的 SVG 圖片的路徑或內容。例如:content: url('path/to/your/svg.svg');。
以下是一個使用 :before 插入 SVG 圖片的示例,其中包含設置顯示方式、寬度、高度和 content 屬性:
.my-icon:before {
content: url('path/to/your/svg.svg');
display: inline-block; /* 或 display: block; */
width: 20px;
height: 20px;
}