我们如何创建覆盖文本高度 50% 的下划线文本？

Question

我被这个问题困住了。我们如何创建一个下划线文本，覆盖文本高度的 50%，并且在小屏幕上也能响应？ 

Answer 1

下划线实际上是渐变背景。换行后它将被保留：body {&nbsp; background-color: #ccc;}span {&nbsp; color: white;&nbsp; font-size: 2em;&nbsp; font-weight: bold;&nbsp;&nbsp;&nbsp; background-image: linear-gradient(to bottom, transparent 50%, #7DE856 50%);&nbsp; padding: .1em .4em;&nbsp;&nbsp;&nbsp; -webkit-box-decoration-break: clone;&nbsp; -o-box-decoration-break: clone;&nbsp; box-decoration-break: clone;}<span>Sample Text</span><br><br><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore necessitatibus obcaecati nisi quaerat! Provident eum ducimus impedit adipisci sequi.</span>

Answer 2

::before在的帮助下CSS.text {&nbsp; position: relative;&nbsp; padding: 1px 7px;&nbsp; z-index: 1;&nbsp; font-size: 20px;&nbsp; line-height: 20px;}.text::before {&nbsp; content: '';&nbsp; position: absolute;&nbsp; height: 40%;&nbsp; width: 100%;&nbsp; background: green;&nbsp; opacity: 0.3;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; z-index: 0;}<span class="text">text here</span><br><span class="text">sample text goes here</span><br><span class="text">text here</span>