CODEWITHSUNDEEP
htmlcsssvg
codenamezero
codenamezero

Reputation: 3079

How to use :before to add <use> for <svg> tags?

couldn't find an example that uses css :before to add <use> inside a <svg> tag. So far I've tried:

.icon-test:before {
  content : '<use xlink:href="test.svg#icon-test"></use>';
}

.icon-test:before {
  content : '\003Cuse xlink\003Ahref\003D\0022test\002Esvg\0023icon-test\0022\003E\003C\002Fuse\003E';
}

<svg class="icon-test"></svg>

Does anybody know the correct way to do it? Or this is not possible?

Basically the end result should yield something like:

<svg class="icon-test">
  <use xlink:href="test.svg#icon-test"></use>
</svg>

But I want to simplify the usage by using :before. Thanks!

Upvotes: 2

Views: 1082

Answers (2)

AmeliaBR
AmeliaBR

Reputation: 27544

A little more detail compared to Jarosław Goszowski's answer:

The ::before and ::after pseudoelements create a new CSS layout box as the first or last child of the CSS layout box for the element(s) matched by the rest of the selector.

The :: notation distinguishes pseudoelement selectors from pseudoclass selectors, and is supported in all browsers after IE8 (in other words, all browsers that will support inline SVG). The single : syntax is only supported for backwards-compatibility.

The psuedo-elements do not create new elements in the DOM, and cannot be used to insert markup. They only affect CSS layout. The content is injected after the HTML markup has been parsed. You cannot even use HTML entities like &amp;; you definitely cannot use entire element markup.

Because they only affect CSS layout, pseudo-elements can only exist for elements whose content follows the CSS layout model. That means you cannot have pseudo-elements for:

  • <img> and <video> elements (the content of the element is replaced by the external file, it does not have a CSS layout model);
  • <input> and <select> elements (the content is replaced by the form widgets created by the browser, no CSS layout model);
  • SVG elements (the content is drawn according to SVG rules, not CSS layout).

So there are two reasons why you cannot use pseudoelements to inject your <use> elements: one, pseudoelements don't have an effect on SVG; two, even if they did, pseudoelements can only be used to inject plain text (or complete image files), not markup.

Upvotes: 0

Jarosław Goszowski
Jarosław Goszowski

Reputation: 9

  1. use ::before
  2. is not possible. You will receive text;

Upvotes: 1

Related Questions