容器两侧的2个div

Question

我有一个容器，其中一些内容以页面中间为中心，看起来很简单：

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

https://jsfiddle.net/5op11m0j/

我想知道是否有可能，使用CSS和：之前和之后，添加2个可点击的div /背景图像，一个在左侧，另一个在容器的右侧？ 我知道最简单的方法就是简单地编写2个div，一个在容器之前，一个在容器之后，但我不能修改我所显示的代码片段的HTML，因为布局非常复杂

p.s by clickable我的意思是背景图片或div将用作广告空间

Answer 1

如果你想让div“可点击”（我假设这意味着，点击它时运行一个函数？）这不可能仅使用css的:: before或:: after函数，但它是可以实现的使用jquery。

您可能想要使用jQuery的append()和prepend()。

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

然后只需在用户clicks此新div

时插入一个事件

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