使用伪元素增加可点击区域

2019-12-07634次阅读HTMLcss模块css

你有没有试过点击一个元素(例如:button,link),然后你意识到它只有在你点击一个特定的区域后才会响应?说白了就是可以点击区域太小。

 

UX Considerations/用户体验注意事项

  • 根据网页无障碍阅读指南(WCAG)准则WCAG 2.1,触摸或鼠标的最小目标尺寸应为44×44像素。大小不是固定的,可能会根据使用情况而改变。但是,44×44像素是一个很好的起点。
  • Fitts’ Law / 菲茨定律(费茨法则),UX设计中要遵循的重要定律。简单地说,触摸或点击目标越大,越接近,用户与其进行交互的时间越短。

仅通过更改元素的宽度和高度或使用填充,并不一定总是可以增大可点击区域。但您不妨试试使用伪元素增加可点击区域,因为伪元素属于其父元素,因此当我们创建具有特定宽度和高度的伪元素时,它将充当其父元素的单击/触摸/悬停区域

.link:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
}

 


 

上一篇: CSS伪类:placeholder-shown实践  下一篇: self,top,parent,opener详解  

使用伪元素增加可点击区域相关文章