Css 这种效果在代码中可能吗？

我注意到一种有趣的趋势，设计师们遵循这种趋势来创建一种下划线，我很好奇这是否可以在代码中实现。它就像一个下划线，但它在单词后面

---

为了获得最佳实践，您应该共享您的代码。从图像和问题来看，你可以这样做

* { 框大小：边框框； } .标题{ 颜色：404C64； 字号：700； 位置：相对位置； 显示：内联块； 保证金：0； 左侧填充：10px； 右边填充：10px； 线高：0.4； } .标题：之后{ 显示：块； 宽度：100%； 填充：10px； 内容：； 位置：绝对位置； 左：0； 右：0； 最高：100%； 背景：D9EEC3； 边界半径：10px； z指数：-1； } 此处文本

---

可以用更短的方式完成：

.underline {
  font-size: 50px;
  border-radius: 10px;
  height: 10px;
  width: 255px;
  box-shadow: 0 45px 0 5px #D9EEC3;
  font-family: sans-serif;
}

---

演示：

到目前为止你做了什么？我们应该开始为您编写代码吗？简短回答是的，它可以是的，这可以很容易地在代码中以许多不同的方式实现。如果您发布一些示例代码，我们可以帮助您，您的问题可能是：如何使用CSS实现这一点？正如你所注意到的，答案是肯定的。好吧，没想到会有反对票。我的第一次尝试是降低线条高度，并使用厚边框底部，但这意味着边缘将是方形的，我对该边框的圆形边缘更感兴趣，如果它们可以制作的话。这就是一个。我不相信这是可能的。我原以为这是一场运球比赛。谢谢分享代码！

h1 {
  display: inline-block;
  position: relative;

  /*  Adjust below values accordingly */
  padding: 0 15px;
}

h1:after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  left: 0;

  /*  Adjust below values accordingly */
  height: 20px;
  margin-top: -15px;
  background-color: lightgreen;
  border-radius: 10px;
}

.underline {
  font-size: 50px;
  border-radius: 10px;
  height: 10px;
  width: 255px;
  box-shadow: 0 45px 0 5px #D9EEC3;
  font-family: sans-serif;
}