如何隐藏HTML元素下方的部分自定义虚线？

核心问题在于透明背景的按钮无法遮挡父元素（ul）的背景虚线，最简单的解决方式是给按钮设置与页面背景一致的纯色背景，既能挡住下方虚线，视觉上按钮仍保持“透明”效果（和页面背景融合）。

修改后的基础方案代码 #

<html>
  <head>
    <style>
      div {
        padding: 10px 50px;
      }

      ul{ 
        display:flex;
        align-items: center; /* 让按钮和虚线垂直居中对齐 */
        padding: 8px 0; /* 增加内边距避免元素过于拥挤 */
      }

      li{
        list-style-type: none;
      }
      
      .dotted-spaced {
        background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
        background-position: center;
        background-size: 10px 1px;
        background-repeat: repeat-x;
      }
      button{
        background-color: #fff; /* 用页面背景色替换透明，挡住下方虚线 */
        margin: 0 20px;
        border: none; /* 可选：去掉默认按钮边框 */
        padding: 8px 16px; /* 可选：增加按钮内边距提升交互感 */
      }

    </style>
  </head>
  <body>
    <ul class='dotted-spaced'>
      <li>
       <button>
        Button1
       </button>
      </li>
      <li>
       <button>
        Button2
       </button>
      </li>
    </ul>
  </body>
</html>

关键修改说明 #

• 将按钮的background-color: rgba(255,255,255,0)改为#fff：利用与页面一致的背景色遮挡父元素的虚线，视觉上按钮仍呈现“透明”效果。
• 给ul添加align-items: center：确保按钮和虚线垂直居中对齐，优化视觉体验。

复杂背景场景方案（页面为渐变/图片背景） #

如果页面背景不是纯色，可以通过层级控制实现：用ul的伪元素生成虚线，让按钮位于虚线层级之上，再给按钮设置与页面一致的背景覆盖虚线。

<html>
  <head>
    <style>
      div {
        padding: 10px 50px;
      }

      ul{ 
        display:flex;
        align-items: center;
        position: relative;
        padding: 8px 0;
      }

      /* 用伪元素生成虚线 */
      ul::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        height: 1px;
        background-image: linear-gradient(to right, #000 40%, rgba(255, 255, 255, 0) 20%);
        background-size: 10px 1px;
        z-index: 0;
      }

      li{
        list-style-type: none;
        position: relative;
        z-index: 1; /* 让按钮层级高于虚线 */
      }
      
      button{
        background-color: transparent;
        margin: 0 20px;
        border: none;
        padding: 8px 16px;
        background: #fff; /* 替换为页面实际背景（渐变/图片） */
      }

    </style>
  </head>
  <body>
    <ul class='dotted-spaced'>
      <li>
       <button>
        Button1
       </button>
      </li>
      <li>
       <button>
        Button2
       </button>
      </li>
    </ul>
  </body>
</html>

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