时间戳

首页 > 解决方案 > 我们如何创建覆盖 50% 高度的下划线文本？

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

问题描述

我被这个问题困住了。我们如何创建一个覆盖 50% 高度并且在小屏幕上响应的下划线文本？ 在此处输入图像描述

标签： htmlcss

解决方案

下划线实际上是渐变背景。它将在换行后保留：

body {
  background-color: #ccc;
}

span {
  color: white;
  font-size: 2em;
  font-weight: bold;
  
  background-image: linear-gradient(to bottom, transparent 50%, #7DE856 50%);
  padding: .1em .4em;
  
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  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>

推荐阅读