CSS :before 伪选择器和增加 <a> 标签的区域

Question

我正在创建一个图像滑块，我希望 "previous" 和 "next" 箭头分别占据滑块区域的一半。增加填充或边距往往会在我放置箭头后移动它的位置。

我找到的最接近的解决方案是使用 :before 伪选择器作为 per this link。这会很好用，但我愿意接受社区的其他建议，因为目前的方法感觉有点 "hacky."

使用这种方法，我试图将每个箭头设置为恰好占据滑块框的一半，但我不知道如何让这些区域响应 window 宽度。

请查看此 fiddle 并调整 window 的大小。

http://jsfiddle.net/amoeboar/avqjnfwt/1/

我希望可点击区域的一半始终占据滑块的一半 window，而不是重新定位箭头。

.prev:before{
    position:absolute;
    content:'';
    top: -40%;
    right: -235%;
    left: -40%;
    bottom: -120%;
    outline:1px solid red;
    z-index:40;
}

虽然这不起作用。首先，设置负百分比看起来很奇怪，其次，调整 window 的大小并没有像我希望的那样保留可点击区域的形状和大小。我想让左箭头刚好占据边界框的一半，右箭头也一样。

谁能给个建议？

Answer 1

链接上不需要 ::before 和 ::after 伪元素；它们只会让事情更难维护。

真正的解决方案是简单地将 <a> 本身定位到您想要它们的屏幕区域，并在每个 <a> 内部使用填充来定位箭头。

.prev,
.next {
    display:block;
    position: absolute;
    left:0; right:50%;
    top:0; bottom:0;
    text-decoration: none;
    color: salmon;
    font-size: 8em;
    outline:1px solid red;
    padding:70px 40px;
}

.next {
    left:50%; right:0;
    text-align:right;
    transform:scaleY(-1);
}

就是这样。因为 <a> 已经绝对定位，所以你不需要 z-index;他们已经在上面了。

参见 updated fiddle。

顺便说一下，你不应该在 HTML 的文本中使用 <，使用 <.

CSS :before 伪选择器和增加 <a> 标签的区域

CSS :before pseudo selector and increasing the area of an <a> tag

html

css

z-index