Я пытаюсь добавить символы к текстовому элементу SVG, которые отделены от значения текстового содержимого текстового элемента. Символы должны находиться перед текстовым элементом и выглядеть так, как будто они являются частью слова, например если бы это был мой тег,

<text ...>bar</text>

Затем я добавляю «foo» к его передней части, так что, когда он отображается в браузере, пользователи видят:

foobar

но на самом деле текстовое содержимое элемента все еще просто «бар».

Я попытался использовать псевдоэлементы CSS :: before и :: after, но они, похоже, не имеют никакого эффекта:

svg text::before
{
  content: "foo"
}

Тем не менее, они отлично работают для не-SVG элементов:

li::before
{
  content: "foo"
}

Если это невозможно, есть ли способ разрешить интервал между текстовыми элементами SVG? например

<text class="something" text-anchor="end" dy=".5ex" y="110.25" x="-15">foo</text>
<text style="display:block; float:left; padding: 1px;" class="something-else" text-anchor="end" dy=".5ex" y="110.25" x="-15" font-family="FontAwesome">bar</text>

Похоже, что «Foo» укладывается прямо на «бар». Я могу изменить координату x с помощью наглазника, но это действительно неудобно, так как я не контролирую ширину содержимого текстового элемента svg.