CSS: прежде чем на встроенном SVG

Обновить
Спасибо porneL за указание связи между сгенерированным контентом и замененными элементами.
Я нашел эту статью, которая касается именно этой темы:
http://red-team-design.com/css-generated-content-replaced-elements/

Интересно, что документ W3C под названием "CSS3 Generated and Replaced Content Module" (от 11 лет назад!) определяет псевдоэлемент :outside, который может предложить решение для использования сгенерированного контента с замененными элементами, путем размещения сгенерированный контент вне замененного элемента, вместо того, чтобы пытаться добавить его внутри.

Оригинальный вопрос

Есть ли способ создать встроенный элемент SVG с использованием псевдоэлементов CSS :before и :after?

Пример: http://jsfiddle.net/wD56Q/

В этом примере стиль, определенный с помощью :before, не применяется к SVG (проверен в Firefox 29 и Chrome 35). Это свойство content в :before? Для того, что я читаю, он пытается вставить сгенерированный контент в элемент. Неужели это сбой с SVG?

Связанная документация из MDN:

:: before (: before)

:: before создает псевдоэлемент, который является первым потомком элемент согласован. Часто используется для добавления косметического контента к элементу, посредством используя свойство content. По умолчанию этот элемент встроен.

Содержание

Свойство CSS содержимого используется с:: before и:: after псевдоэлементы для генерации контента в элементе. Вставляемые объекты используя свойство content, являются анонимными замененными элементами.

Код в примере:

   svg {
     left: 50px;
     position: absolute;
     top: 50px;
   }
   svg circle {
     fill: green;
   }
   svg:before {
     border: 2px solid blue;
     content: "";
     height: 100px;
     margin: -6px;
     padding: 4px;
     position: absolute;
     width: 100px;
     z-index: -1;
   }
   div {
     background-color: green;
     height: 100px;
     left: 200px;
     position: absolute;
     top: 150px;
     width: 100px;
   }
   div:before {
     border: 2px solid blue;
     content: "";
     height: 100px;
     margin: -6px;
     padding: 4px;
     position: absolute;
     width: 100px;
     z-index: -1;
   }

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>

<div></div>

Ответ 1