CODEWITHSUNDEEP
css
Spedwards
Spedwards

Reputation: 4492

CSS Hover Treat Element As Square

I have a down arrow created in CSS however I would like for it to be treated like a square. Currently, to trigger any of the hover effects, you need to hover over one of the lines. I would like to hover in between the lines to achieve the same effect but I can't think of anything that works.

Unfortunately I'm horrible when it comes to explaining problems so searching was difficult, so hopefully I can receive help here. I have a snippet below with my 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>

Upvotes: 0

Views: 274

Answers (1)

Midhun Monachan
Midhun Monachan

Reputation: 746

Disclaimer: These values may require adjustments depending upon the usage.

This can be done by setting a padding for the element.

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

or combined padding: top right bottom left

padding: 50px 10px 10px 10px;

See the demo below:

.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>

Upvotes: 1

Related Questions