如何用CSS实现逐行缩短的红色高亮效果？（Jade&SASS开发）

嘿，我来帮你搞定这个逐行缩短的红色高亮效果！结合你正在用的Jade和SASS，咱们可以通过结构拆分+SASS循环来轻松实现需求，具体步骤如下：

第一步：调整Jade结构，拆分文本行 #

首先得把需要高亮的文本拆成独立的行元素，这样才能给每行单独设置渐变宽度的高亮背景：

#section
  .content
    h1
      span.line 这是第一行最长的文本内容
      span.line 第二行长度稍短一些
      span.line 第三行再短一点
      span.line 最后一行最短

第二步：用SASS实现逐行递减的红色高亮 #

接下来在SASS里利用循环自动给每行设置递减的宽度，同时加上红色高亮效果，结合你现有的代码修改如下：

#section {
  min-height: auto;
  width: 100vw;
  background: black;
  
  .content {
    margin: 0 auto;
    padding: 7vh 0;
    width: 52vw;
    position: relative;
    
    h1, h2 {
      color: #c9d0d4;
      font-family: 'Helvetica Neue', sans-serif;
      font-size: 1.2em;
      font-weight: 100;
      letter-spacing: 1px;
      padding: 0;
      margin-bottom: 1.2rem; // 给行之间加些间距，更美观
      
      .line {
        display: block; // 让每个span独占一行
        padding: 0.3rem 0.6rem; // 给高亮背景加内边距，避免文字贴边
        background: rgba(220, 38, 38, 0.9); // 红色高亮，可调整颜色和透明度
        margin: 0.2rem 0; // 行与行之间的间距
        
        // SASS循环：逐行设置递减宽度
        @for $i from 1 through 4 { // 这里假设最多4行，按需修改数量
          &:nth-child(#{$i}) {
            // 第一行100%，每行递减20%，比例可以自定义
            width: calc(100% - #{$i * 20%});
          }
        }
      }
    }
  }
}

关键细节说明： #

• 结构拆分：把每行文本放进.line span里，确保每行可以独立控制样式，这是实现逐行缩短的基础。
• SASS循环：用@for循环自动计算每行的宽度，不用手动给每行写重复样式，比如第1行占满容器，第2行减20%，第3行减40%，以此类推，比例完全可以根据你的需求调整（比如改成每行减15%，就是#{$i * 15%}）。
• 高亮优化：用半透明红色做背景，配合内边距让文字和高亮区域更协调，也可以换成纯红色或者渐变背景，按需调整。

如果你的文本行数不固定，也可以配合JavaScript动态计算行数后设置样式，但在固定行数的场景下，SASS循环是最简洁高效的方案。

内容的提问来源于stack exchange，提问作者Marius