css实现扩大选中范围 (三种方法)

css实现扩大选中范围

HTML

<style type="text/css">
    
    .content{
        position: relative;
        width: 60%;
        height: 400px;
        margin: 0 auto;
        border: 1px solid orange;
    }
     
    .closeIcon{
        position: absolute;
        top: 20px;
        right: 20px;
        color: red;
        font-weight: 800;
        cursor: pointer;
}
style>

<div class="content">
    <span class="closeIcon">
    	X
    span>
div>

1. 通过padding来实现

   .closeIcon{
       padding: 15px;//设置padding大小来控制扩大的范围 
   }
   

2. 通过border大小来实现

   .closeIcon{
       border: 10px solid transparent;//设置border大小来控制扩大的范围,颜色设置为透明
   } 
   

3. 通过伪元素来实现(推荐)

   .closeIcon::after{
       content: '';
       position: absolute;
       top: -15px;//设置top,left,right,bottom大小来控制扩大的范围
       left: -15px;
       right: -15px;
       bottom: -15px;
   }
   

JavaScript

<script>
    let closeIcon = document.querySelector(".closeIcon");
    closeIcon.addEventListener('click',()=>{
    	alert("success")
    })
</script>

实现效果