CSS inset box-shadow 带偏移量？

Question

我想要的结果是一个带有粗下划线的标题元素，从左侧稍微偏移，如下所示：

我让下划线与插入的 CSS box-shadow 一起使用，但我不知道如何将它从左侧偏移，以便它不完全与 h2 文本的开头对齐。

html {
  font-family: 'Roboto', sans-serif;
  font-size: 62.5%;
  // -ms-text-size-adjust: 100%;
  // -webkit-text-size-adjust: 100%;
}

body {
  word-wrap: break-word;
  overflow-x: hidden;
}

h2 {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.1;
}

h2 span {
  box-shadow: inset 0 -1.0rem 0 0 #88DEB2;
  padding-right: 1rem;
}

<h2><span>Incredible Pure Castile Soap</span></h2>

很高兴获得有关如何实现这一目标的任何提示。

Answer 1

你几乎很好，只需添加一个否定text-indent：

html {
  font-family: 'Roboto', sans-serif;
  font-size: 62.5%;
}

body {
  word-wrap: break-word;
  overflow-x: hidden;
}

h2 {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.1;
  padding-left: 1rem;
}

h2 span {
  box-shadow: inset 0 -1.0rem 0 0 #88DEB2;
  display:inline-block; /* this is needed for the trick */
  text-indent: -1rem; /* here */
  padding-right: 1rem;
}

<h2><span>Incredible Pure Castile Soap</span></h2>

带梯度的多线解

html {
  font-family: 'Roboto', sans-serif;
  font-size: 62.5%;
}

body {
  word-wrap: break-word;
  overflow-x: hidden;
}

h2 {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.1;
  padding-left: 1rem;
}

h2 span {
  background:
    linear-gradient(#88DEB2,#88DEB2) 
    bottom right/calc(100% - 1rem) 1rem 
    no-repeat;
  padding-right: 1rem;
}

<h2><span>Incredible Pure Castile Soap</span></h2>