如何在鼠标悬停时在两个元素之间添加空格答案

【问题标题】：How to add space between two elements on mouse hover如何在鼠标悬停时在两个元素之间添加空格
【发布时间】：2021-09-21 15:11:32
【问题描述】：

HTML：

        <div class="main-text">
           <h2>Surface laptop Go</h2>
            <p>Make the most of every day with our largerst surface laptop</p>
            <button>
                   <span> Shop now </span> 
                  <i class="fa fa-angle-right"></i>
            </button> 
        </div>

CSS：

      .main-text button { 
          padding: .8rem 1.5rem;
         border: none;
         background-color: #000;
         color: #fff;
         cursor: pointer; 
       }

       .main-text span:hover{
          border-bottom: 2px #fff solid;
       }

我不知道如何在鼠标悬停时移动两个元素之间的中间空间。参考：https://www.microsoft.com/shop now按钮

【问题讨论】：

您问了两个不同的问题。你想回答哪一个？提示：这不是你在标题中写的。

标签： html css button css-animations mousehover

【解决方案1】：

.main-text button { 
         width:150px;
         height:50px;
         border: none;
         background-color: #000;
         color: #fff;
         cursor: pointer; 
         transition:0.2s;
       }

       .main-text span:hover{
          border-bottom: 2px #fff solid;
       }

       button:hover span
       {
         padding:0 5px;
         transition:0.2s;
         text-decoration:underline;
       }

<div class="main-text">
      <h2>Surface laptop Go</h2>
       <p>Make the most of every day with our largerst surface laptop</p>
       <button>
              <span>Shop now </span>
              <span><svg style="fill: white;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" class="svg-fg" viewBox="0 0 30 48" style="stroke-width:1px"><path d="M0 4.7C6.4 11.1 12.8 17.5 19.4 24 12.9 30.4 6.5 36.7 0.1 43.1c1.7 1.7 3.3 3.3 4.7 4.7 8-8 16.1-16 24.2-24 -8.1-8-16.1-16-24.2-24C3.4 1.3 1.8 2.9 0 4.7z"></path><path d="M0 4.7c1.8-1.8 3.4-3.4 4.9-4.9 8 8 16.1 16 24.2 24 -8.1 8-16.1 16-24.2 24 -1.5-1.5-3.1-3.1-4.7-4.7C6.5 36.7 12.9 30.4 19.4 24 12.8 17.5 6.4 11.1 0 4.7z"></path></svg></span>
             <i class="fa fa-angle-right"></i>
       </button> 
   </div>

您可以使用上面的代码来实现您的预期输出。

【讨论】：

【解决方案2】：

你可以试试这个代码来实现这个。

*{box-sizing: border-box;}
.main-text button { 
          padding: .8rem 1.5rem;
         border: none;
         background-color: #000;
         color: #fff;
  width: 120px;
         cursor: pointer; 
       }

.main-text span{transition: .2s ease all; position: relative; margin-right: 10px; display: inline-block;
border-bottom:2px solid #000;}
.main-text span::after {
  content: '>';
  position: absolute;
  right: -15px;
  transition: .2s ease all;
}
       .main-text span:hover{
         border-color: #fff;
         margin-left: -15px;
       }
.main-text span:hover::after {
  right: -25px;
}

<div class="main-text">
           <h2>Surface laptop Go</h2>
            <p>Make the most of every day with our largerst surface laptop</p>
            <button>
                   <span> Shop now </span>
            </button> 
        </div>

【讨论】：