del和ins元素设置背景色模拟diff效果示意

展示

代码

• HTML：

  <p>const arr = [];</p>
  <del>
    <p>if (strA == strB) {</p>
  </del>
  <ins datetime="2024-04-01">
    <p>if (strA === strB) {</p>
  </ins>
  <p>  arr.push(arrA);</p>
  <p>}</p>

• CSS：

  del, ins {
    display: block;
    text-decoration: none;
    position: relative;
  }
  
  del {
    background-color: #fbb;
  }
  
  ins {
    background-color: #d4fcbc;
  }
  
  del::before,
  ins::before {
    position: absolute;
    left: 0.5rem;
    font-family: monospace;
  }
  
  del::before {
    content: '−';
  }
  
  ins::before {
    content: '+';
  }
  
  p {
    margin: 0 1.8rem 0;
    font-family: Consolas, Monaco, monospace;;
    font-size: 1rem;
    white-space: pre-wrap;
  }