Включить поддержку CSS3:: вне псевдоэлемента

Ответ 1

Вы правы: ни один браузер не реализовал какие-либо новые функции в древнем CSS3 Generated and Replaced Content module, так что вы не сможет попробовать предложенные псевдоэлементы. Фактически, они планируют переписать сам модуль, поэтому текущий рабочий проект следует считать заброшенным, и, к сожалению, не сообщается о судьбе этих предлагаемых функций.

Во всяком случае, я не знаю ни одного полиса для JS, доступного для этих псевдоэлементов, так что вам не повезло при написании селекторов, использующих ::outside в вашем CSS.

Самое близкое, что вы можете получить, это обернуть фактические элементы вокруг элементов, для которых вы хотите создать стиль с контейнером... это дешево выполняется с помощью, например, jQuery .wrap() или .wrapAll().

Итак, вместо этого:

p::outside {
    display: block;
    border: 3px solid #00f;
}

Вы бы сделали это:

$('p').wrap('<div class="outside-p" />');

/* 
 * Notice that you can't select only .outside-p that contains p:only-child,
 * so you'll have to come up with esoteric class names.
 */
.outside-p {
    border: 3px solid #00f;
}

jsFiddle preview

Есть некоторые оговорки к этому, однако:

• Это во многом зависит от DOM; вы не сможете обернуть некоторые элементы вокруг других в зависимости от обстоятельств. Даже если вы можете, эти элементы-обертки могут вступить в противоречие с поведением или даже с дизайном фактических родительских элементов.

  Например, он не позволяет использовать дочерний селектор в следующих случаях:

  article > p
  

  Если вы намерены jQuery.wrap() те p элементы, так как тогда эти элементы-оболочки будут разбивать отношения между родителями и дочерними элементами между article и p.

• Спецификация утверждает, что ::outside псевдоэлементы, такие как ::before и ::after, должны наследовать стили из элементов, которые их генерируют. Если вы используете JavaScript/jQuery для добавления оберток, эти оболочки будут наследовать стили из своих родительских элементов, а не те, которые они обертывают. Это никогда не было проблемой при полифинге ::before и ::after, поскольку они должны быть вставлены как дочерние элементы в любом случае, следуя правилам наследования обычно.

Ответ 2

Я наконец добавил этот фрагмент к своей странице:

  $('ol > li').each(function(){
        var $this = $(this);
        var $content = $($this.contents());
        $content.wrapAll('<p class="liwrap"/>');
  });

Это добавляет p внутри li, что позволяет избежать проблемы с разбиением дочерних селекторов и требует эзотерических имен для классов (потому что нет родительского селектора). Он также избегает проблем не наследующих стилей, потому что ::outside можно заменить на ::before.

Для достижения правильного визуального эффекта, однако, требуется отрицательный запас, чтобы поднять внутренний p до уровня сгенерированного содержимого.

Ответ 3

Похоже, вы используете jQuery, и в этом случае я бы предложил небольшую модификацию вашего кода

$('ol > li').wrapInner("<p class='liwrap' />");

Это немного чище и проще, без каких-либо переменных или вызовов функций.

Изменить: Как благоразумительно указывает, это оптимизация решения Marcins, которое...

добавляет p внутри li, что позволяет избежать проблемы с разбиением дочерних селекторов