如何修改MKDocs下拉菜单蓝色横幅尺寸并移除左侧铅笔图标

针对你在Materials for MKDocs中遇到的问题，以下是修改后的代码，可同时实现移除左侧铅笔图标、将蓝色横幅缩短至一半长度的需求：

<!DOCTYPE html>  
<html>  
<head>  
  <style>
    /* 移除summary左侧的铅笔图标 */
    details summary::before {
      display: none !important;
    }

    /* 调整summary蓝色横幅宽度为50%，确保内边距不额外增加宽度 */
    details summary {
      width: 50% !important;
      box-sizing: border-box;
    }

    a {  
      display: inline-block;  
      padding: 50px;  
      text-decoration: none;  
    }  
    a:hover {  
      box-shadow: 0 0 50px blue;  
    }  
  </style>  
</head>  
<body>  
  <details>  
    <summary style="font-size: 25px;">Acute & Post Acute</summary>  
    <div class="image-container">  
      <a href="https://website.com">  
        <span style="content:url('Media/Image_1.png')"></span>  
      </a>
    </div>  
  </details>  
</body>  
</html>

关键修改说明： #

• 移除铅笔图标：通过details summary::before { display: none !important; }覆盖主题默认的伪元素图标——Materials for MKDocs通常会给summary添加该图标作为展开指示器。
• 缩短蓝色横幅：给details summary设置width: 50% !important，搭配box-sizing: border-box确保内边距、边框不会额外增加宽度，让横幅刚好占据页面一半宽度。
• 使用!important是为了让自定义样式优先级高于Materials for MKDocs主题的默认样式，避免被覆盖。

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