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

Как следует из названия, есть ли способ стилизовать псевдо-iframes 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/

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


iframe css styling pseudo-element css-content
person yckart    schedule 05.06.2013    source источник
comment
Ссылка на скрипт не работает, и я не вижу обходного пути, который вы упомянули в зеркало ссылки...   -  person brasofilo    schedule 28.09.2019

Ответы (2)


arrow_upward
28
arrow_downward

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

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

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

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

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

person pzin    schedule 05.06.2013

arrow_upward
3
arrow_downward

Прямой обходной путь для целей отладки

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

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 к третьему элементу.

person John    schedule 10.05.2017