CSS Hover 将元素视为正方形

Question

我在 CSS 中创建了一个向下箭头，但我希望将其视为正方形。目前，要触发任何悬停效果，您需要将鼠标悬停在其中一条线上。我想将鼠标悬停在两行之间以达到相同的效果，但我想不出任何可行的方法。

不幸的是，在解释问题时我很糟糕，所以搜索很困难，所以希望我能在这里得到帮助。下面是我的 CSS 片段。

.down:before {
  transform: rotate(55deg) translateX(-20px);
}
.down:after {
  transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
  content: '';
  background-color: #000;
  display: block;
  height: 2px;
  width: 40px;
  transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
  background-color: #808080;
}

/* FOR VISIBILITY IN SNIPPET */
.down {
  position: absolute;
  top: 50px;
  left: 50px;
}

<a href="#" class="down"></a>

Answer 1

免责声明:这些值可能需要根据用途进行调整。

这可以通过设置 padding 来完成对于元素。

padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

或组合填充:左上右下

padding: 50px 10px 10px 10px;

请看下面的演示:

.down:before {
  transform: rotate(55deg) translateX(-20px);
}
.down:after {
  transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
  content: '';
  background-color: #000;
  display: block;
  height: 2px;
  width: 40px;
  transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
  background-color: #808080;
}

/* FOR VISIBILITY IN SNIPPET */
.down {
  position: absolute;
  top: 50px;
  left: 50px;
  padding-top: 50px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

<a href="#" class="down"></a>