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

【问题标题】：Is this effect possible in code?这种效果在代码中可能吗？
【发布时间】：2016-04-15 19:48:44
【问题描述】：

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

【问题讨论】：

到目前为止你做了什么？我们应该开始为您编写代码吗？
简短回答是的，可以
是的，这可以通过许多不同的方式在代码中轻松实现。如果您发布一些示例代码，我们可以提供帮助
您的问题可能应该是：“我如何用 CSS 做到这一点？” 因为，正如您所注意到的，“的答案可以做到吗？ " 是是。
好的，没想到会遭到反对。我的第一次尝试是减少行高并使用厚边框底部，但这意味着边缘将是方形的，我对该边框的圆形边缘更加好奇，如果它们可以制作的话。

【解决方案1】：

可以用更短的方式完成：

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

演示：http://jsbin.com/vohoroziwa/1/edit?html,css,output

【讨论】：

【解决方案2】：

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

* {
  box-sizing: border-box;
}
.heading {
  color: #404C64;
  font-weight: 700;
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 0.4;
}
.heading:after {
  display: block;
  width: 100%;
  padding: 10px;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #D9EEC3;
  border-radius: 10px;
  z-index: -1;
}

&lt;h1 class="heading"&gt;Text here&lt;/h1&gt;

【讨论】：

就是这个。不相信这是可能的。我期待它是一个“运球”的案例。感谢您分享代码！

【解决方案3】：

<h1>Text Here</h1>

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

JSFiddle

【讨论】：