Можно ли как-то стилизовать iframes до/после псевдоэлемента?

Как гласит название, есть ли способ создать iframes pseudo before/after? Без обертывания iframe с другим div, иначе? `

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

iframe::before {
    content: 'foo';
    position: absolute;
    top: 0;
    left: 0;
}

iframe::after {
    content: 'bar';
    position: absolute;
    top: 0;
    right: 0;
}

http://fiddle.jshell.net/ppRqm/

Обновление

Известное обходное решение заключается в том, чтобы добавить до/после элемент в исходный файл: http://fiddle.jshell.net/ppRqm/2/

Но иногда у вас нет доступа к исходному файлу.

Ответы

Ответ 1

Я не уверен, но думаю, что это невозможно. Или логика iframe делает невозможным достижение.

Как вы знаете, псевдоэлементы добавляются в свой контейнер, если вы делаете это с iframe, в iframe будут добавлены псевдоэлементы. Но, и здесь проблема, содержимое iframe, встроенный контент, будет просто загружаться, если браузер не поддерживает iframes.

Это означает, что это:

<iframe>
  <div>Your browser doesn't support iframes</div>
</iframe>

И добавление псевдоэлементов будет делать то же самое; на современных браузерах встроенный контент не будет отображаться.

Ответ 2

Прямая работа для целей отладки

У меня есть уровень отладки CSS, который дает outline элементы с недопустимым или устаревшим кодом. Хотя не совсем ответ, кто-то может найти его полезным, поскольку я пытался найти способ визуально убедиться, что любой контент, встроенный в iframe, имеет атрибут/значение allowfullscreen="true". Эта обходная работа использует селектор sibling, и он работает достаточно хорошо.

iframe:not([allowfullscreen]) + *::after
{
 background-color: #f00;
 border: #f00 solid 4px;
 color: #fff;
 content: 'Missing allowfullscreen attribute on iframe!' !important;
 font-size: 24px;
 padding: 4px;
}

Прямой стиль с использованием третьего элемента

Если вы ищете позицию относительно iframe, моей следующей рекомендацией было бы установить родительскую позицию iframe на position: relative;, а затем установить position: absolute; на третий элемент, чтобы он соответствовал рендерингу iframe. Наконец, вы можете, наконец, применить ::after к этому третьему элементу.