CSS :before 伪选择器和增加 <a> 标签的面积答案

【问题标题】：CSS :before pseudo selector and increasing the area of an <a> tagCSS :before 伪选择器和增加 <a> 标签的面积
【发布时间】：2015-04-22 14:09:41
【问题描述】：

我正在创建一个图像滑块，我希望“上一个”和“下一个”箭头分别占据滑块的一半区域。在我放置箭头后，增加填充或边距往往会改变箭头的位置。

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

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

请查看此小提琴并调整窗口大小。

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

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

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

但这不起作用。首先，设置负百分比似乎很奇怪，其次，调整窗口大小并不能像我希望的那样保留可点击区域的形状和大小。我希望左箭头恰好占据边界框的一半，右箭头也这样做。

任何人都可以提出建议吗？

【问题讨论】：

这几乎对我有用，除了我不想移动箭头的位置。它们被放置在相对于黑盒子的特定位置，我只想更改可点击区域，使其占据盒子的一半。
定位箭头只是改变<a>元素的填充。 This fiddle 将它们放在与它们相同的位置。
漂亮的解决方案，非常感谢！
好的，我会把它写下来作为答案。

标签： html css z-index

【解决方案1】：

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

真正的解决方案是简单地将<a>s 自己定位到您想要它们的屏幕区域，并在每个<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>s 已经被绝对定位，所以你不需要z-index；他们已经位居榜首。

见updated fiddle。

顺便说一句，您不应该在 HTML 文本中使用 &lt;，而是使用 &lt;。

【讨论】：