css使用伪元素扩大点击区域

<template>
  <div id="app">
    <span @click="close">x</span>
  </div>
</template>
<script>
export default {
  methods: {
    close() {
      console.log('123')
    }
  }
}
</script>

<style lang="less" scoped>
#app {

    > span {

      position: relative;

      &::after {

        content: '';

        position: absolute;

        top: -10px;

        bottom: -10px;

        left: -10px;

        right: -10px;

      }

    }

}
</style>

 

 

img标签加不了伪元素，解决方案：给父标签添加伪元素