2 див по бокам контейнера

Question

у меня есть контейнер с некоторым содержанием, который сосредоточен на середине страницы, это выглядит очень просто:

<section> 
    <div class="container"> 
    <p>Lorem ipsum dolor sit amet...</p> 
    </div> 
</section> 

https://jsfiddle.net/5op11m0j/

мне было интересно это возможно, используя CSS и: до и: после, добавить 2 интерактивных div/фоновых изображения, один с левой стороны и одну из правой стороны контейнера? Я знаю, что самым простым способом было бы просто написать 2 divs, один до и один после контейнера, но я не могу изменить HTML-код фрагмента, который я показал, потому что макет довольно сложный.

ps, clickable i mean on background image или div, который будет использоваться в качестве рекламного пространства

Answer 1

Если вы хотите, чтобы div был «кликабельным» (я предполагаю, что это значит, запустите функцию, когда она нажата?), это невозможно, используя только css :: before или :: после функции, однако это возможно с помощью jquery.

Возможно, вы захотите использовать jQuery's append() и prepend().

$(".container").prepend("<div id=\"firstDiv\">Test</div>"); 

Затем просто вставить событие, когда пользователь clicks этого нового DIV

$("#firstDiv").click(function() { 
    alert("div clicked"); 
});