HTML：

<代码><；DIV类="；主文本"；>；<；H2>；Surface Laptop Go<；/H2>；<；P>；使用我们最大的Surface笔记本电脑，充分利用每一天<；/p>；<；按钮>；<；span>；立即购买<；/span>；<；I类="；fa fa-angle-right"；>；<；/I>；<；/按钮>；<；/DIV>；

CSS：

<代码>.main-text按钮{填充：.8rem 1.5rem；边框：无；背景颜色：#000；颜色：#FFF；游标：指针；}.main-text span：悬停{底部边框：2px#FFF实线；}

我不知道如何移动两个元素之间的中间空间。参考：https：//www.microsoft.com/ <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> 按钮

顺晟科技：

您可以尝试此代码来实现这一点。

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

       

<代码><；DIV类=“ main-text ”>；<；H2>；Surface Laptop Go<；/H2>；<；P>；使用我们最大的Surface笔记本电脑，充分利用每一天<；/p>；<；按钮>；<；span>；立即购买<；/span>；<；/按钮>；<；/DIV>；

<代码>.main-text按钮{宽度：150px；高度：50px；边框：无；背景色：#000；颜色：#FFF；游标：指针；过渡段：0.2S；}.main-text span：悬停{底部边框：2px#FFF实线；}按钮：悬停范围{填充：0 5px；过渡段：0.2S；文本修饰：下划线；}

<代码><；DIV类=“ main-text ”>；<；H2>；Surface Laptop Go<；/H2>；<；P>；使用我们最大的Surface笔记本电脑，充分利用每一天<；/p>；<；按钮>；<；span>；立即购买<；/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=“ 003048 ” style=“ stroke-width：1px ”>；<；path d=" M0 4.7C6.41 1.11 2.817.5 19.42412.93 0.46.536.7 0.143.1C1.7 1.7 3.3 3.3 4.74.78-8 16.1-16 24.2-24-8.1-8-16-24.2-24C3.4 1.3 1.8 2.90 4.7Z “>；<；/路径>；<；路径D=” M0 4.7C1.8-1.8 3.4-3.4 4gt；<；/span>；<；I类=“ fa fa-angle-right ”>；<；/I>；<；/按钮>；<；/DIV>；

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