我试图实现类似这张图片的东西：
我有一个包裹在div中的图像(作为幻灯片的一部分)，并且带有：before和：after伪元素，我显示两个控件移动到下一个(>>)或上一个(<幻灯片的图像。 到目前为止，我有这个：
div {
position: relative;
}
div:before {
display:block;
height: 100%;
content: "stuff";
position:absolute;
top: 0; left: 0;
text-align: center;
}
这是可能实现吗？如果不是，最语义的解决方法是什么？
我不想把元素本身，只有它的内容。我更喜欢将元素拉伸到100％的高度。
Edit2：另外，img是液体/流体，div / img的高度是未知的，宽度设置为800px，最大宽度设置为80％。
解决方法
假设你的元素不是< img> (因为伪元素不允许在自闭合元素上)，让我们假设它是一个< div>，所以一种方法可以是：
div {
height: 100px ;
line-height: 100px;
}
div:before,div:after {
content: "";
...
display: inline-block;
vertical-align: middle;
height: ...;
line-height: normal;
}
如果你不能改变div的line-height，另一种方法是：
div {
position: relative;
}
div:before,div:after {
position: absolute;
display: block;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
content: "";
width: ...
}
否则，只是将指示器作为背景放在中心位置。
