Có cách nào đó nó có thể tạo kiểu iframe trước/sau phần tử giả không?

Question

Như tiêu đề nói, có cách nào để tạo kiểu cho một iframe giả before/after? ? Nếu không có gói các iframe với div khác, nếu không '

tôi đã cố gắng để định dạng như bất kỳ yếu tố khác, nhưng không thành công:

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/

Cập nhật

Một workaround đã biết là thêm trước/sau vào phần tử trong tệp nguồn: http://fiddle.jshell.net/ppRqm/2/

Nhưng đôi khi bạn không có quyền truy cập vào tệp nguồn.

Answer 1

Tôi không chắc chắn nhưng tôi nghĩ điều đó là không thể. Hoặc logic đằng sau khung nội tuyến khiến cho nó không thể đạt được.

Như bạn đã biết, giả yếu tố này là thêm để chuyển container, nếu bạn làm điều đó với một khung nội tuyến, giả yếu tố sẽ được thêm vào bên trong iframe. Nhưng, và đây là vấn đề, nội dung iframe, nội dung nội tuyến , sẽ chỉ tải nếu trình duyệt không hỗ trợ iframe.

Điều này có nghĩa rằng đây:

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

Và thêm pseudo-yếu tố, sẽ làm điều tương tự; trên các trình duyệt hiện đại nội dung trực tuyếnsẽ không được hiển thị.

Answer 2

trực tiếp công việc xung quanh cho Debugging Mục đích

Tôi có một CSS tầng gỡ lỗi cung cấp cho một outline đến các yếu tố với mã không hợp lệ hoặc đã lỗi thời. Mặc dù không chính xác một câu trả lời mà ai đó có thể thấy hữu ích khi tôi cố gắng tìm cách đảm bảo trực quan rằng bất kỳ nội dung nào được nhúng với khung nội tuyến đều có thuộc tính/giá trị allowfullscreen="true". Công việc này sử dụng bộ chọn anh chị em và nó hoạt động tốt.

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; 
} 

Direct Styling bằng cách sử dụng ba phần tử

Nếu bạn đang tìm kiếm để xác định vị trí tương đối so với iframe đề xuất tiếp theo của tôi sẽ được thiết lập vị trí cha mẹ của khung nội tuyến để position: relative; và sau đó thiết position: absolute; trên Phần tử thứ ba khớp với kết xuất của khung nội tuyến. Cuối cùng, cuối cùng bạn có thể áp dụng ::after trên phần tử thứ ba đó.