如何使用边框底线移动下划线，使之看起来像使用阴影框下划线的底线？

Question

简单问题：

我可以使使用border-bottom的下划线（右侧的线）看起来与使用box-shadow的下划线的右侧（线的左侧）吗？

我只需要CSS。正如您从摘要中看到的那样，它可能跨越多行。

基本上，我需要将边框的底部向上移动一点，不要弄乱其他所有东西。

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');

div.flex {
  display: flex;
  width: 420px;
  justify-content: space-between;
}

div.flex2 {
  display: flex;
  width: 300px;
  justify-content: space-between;
}

h2 {
  font-family: 'Proxima Nova';
  color: rgb(60,128,124);
  font-size: 21px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

a.boxShadow {
  color: darkGrey;
  text-decoration: none;  
  line-height: 26px;
  
  box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
  padding-bottom: 3px;
}

a.borderBottom {
  color: darkGrey;
  text-decoration: none;
  line-height: 26px;
  
  border-bottom: 2px solid rgb(60,128,124);
}

<div class="flex">
  <h2>
    <a class="boxShadow">Hello gjq box-shadow</a>
  </h2>
  <h2>
    <a class="borderBottom">Hello border-bottom</a>
  </h2>
</div>

<div class="flex2">
  <h2>
    <a class="boxShadow">Hello gjq box-shadow</a>
  </h2>
  <h2>
    <a class="borderBottom">Hello border-bottom</a>
  </h2>
</div>

此问题的原因（浏览器一致性）：

box-shadow示例完全符合我的要求，但是在Edge上看起来并不好（而且恐怕其他浏览器也可能无法正确呈现它）。不过，它在Chrome和Firefox上看起来很完美。我尚未测试过的Safari。

另一方面，border-bottom似乎在浏览器中始终呈现。但是我无法在需要的位置显示下划线。

Answer 1

渐变可以做到这一点

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');

div.flex {
  display: flex;
  width: 420px;
  justify-content: space-between;
}

div.flex2 {
  display: flex;
  width: 300px;
  justify-content: space-between;
}

h2 {
  font-family: 'Proxima Nova';
  color: rgb(60,128,124);
  font-size: 21px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

a.boxShadow {
  color: darkGrey;
  text-decoration: none;  
  line-height: 26px;
  
  box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
  padding-bottom: 3px;
}

a.borderBottom {
  color: darkGrey;
  text-decoration: none;
  line-height: 26px;
  
  background:
   linear-gradient(rgb(60,128,124),rgb(60,128,124)) 
    bottom 1px center/ /* Position */
    100% 2px  /*width height*/
   no-repeat;
}

<div class="flex">
  <h2>
    <a class="boxShadow">Hello gjq box-shadow</a>
  </h2>
  <h2>
    <a class="borderBottom">Hello border-bottom</a>
  </h2>
</div>

<div class="flex2">
  <h2>
    <a class="boxShadow">Hello gjq box-shadow</a>
  </h2>
  <h2>
    <a class="borderBottom">Hello border-bottom</a>
  </h2>
</div>