當使用 CSS :beforecontent 屬性來插入 SVG 圖片時,可能會遇到長寬為 0 的情況。這通常是由於缺少必要的 CSS 屬性導致的。

可能的原因如下:

  1. 缺少顯示屬性 (display): 您需要確保 :before 元素被正確地顯示在頁面上。您可以使用 display: inline-block;display: block; 等來設置元素的顯示方式。

  2. 缺少寬度和高度 (widthheight): 如果沒有為 :before 元素設置寬度和高度,它的默認值將為 0。可以使用 widthheight 屬性來設置元素的大小,以確保 SVG 圖片正確顯示。

  3. 設置 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;
}