如何创建超链接侧边栏？ [关闭]

Question

我很遗憾浏览器不支持使用嵌套的<h1>-<h6> 和<section> 导航结构清晰的页面。所以现在我尝试滚动my own（很自豪没有js，它的效果出奇的好，除了菜单一直显示直到鼠标移出）。我有 3 个目标：

1. 可视化嵌套结构 - 蓝色左边框从 <section> 的标题延伸到末尾
2. 为他们提供面包屑导航功能 - 使用 title 属性完成，但笨拙地嵌套 <div> 以取消标题内容，因此它仅在左侧显示工具提示。
3. 将侧栏链接到书签或跳转到标题。不知道该怎么做。如果我把<section> 放到<a> 中，整个内容就会变成一个超链接，对于href，似乎没有等同于我在内容上取消标题的方式。

您将如何实现这一目标？我是否需要一种完全不同的方法，比如将一个空的<a> 放在<section> 的左侧，然后通过一些魔法让它变得一样高？此外，我会在相同的 2 个区域中划线，5px 蓝色和 10px 白色，它们还应该有标题和链接，以使其更难错过

Answer 1

这是一个有趣的话题。我建议使用由::before 伪元素扩展的<a> 标记，然后使用绝对定位不使整个<section> 成为锚标记。在this 示例中运行良好。

---

*,
::after,
::before {
  box-sizing: border-box;
}

section {
  position: relative;
  padding-left: 16px;
  margin-top: 48px;
}
section p:first-letter {
  font-size: 2rem;
}
section::before {
  content: attr(h);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-100%);
}
section a.border::before {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  width: 4px;
  background-color: #2196f3;
}

<section id="description" h="DESCRIPTION">
  <a class="border" href="#description"></a>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas voluptatem totam sint. Ducimus nulla quam similique quas, officiis vero? Nihil repellat illum corporis atque quis necessitatibus doloribus? Est consequuntur voluptatem quo, expedita molestiae tempore id minima impedit doloribus! Inventore optio laborum aliquam veritatis ad, saepe eum, quae distinctio dicta nulla odit expedita unde corporis perspiciatis eos labore odio eaque nemo cumque velit quos fugiat maiores quis! Tempore magnam, enim consequatur neque autem repellendus dolore possimus architecto facilis eveniet adipisci perspiciatis modi totam pariatur eaque, ad quas earum tempora voluptate recusandae iure impedit non? Dolore hic veritatis sit eum consequuntur incidunt laboriosam mollitia distinctio vero error voluptatibus eos, in aliquam veniam quisquam, placeat illo doloremque aliquid quod velit! Consectetur laboriosam officiis deleniti quod reprehenderit aliquam commodi modi reiciendis laborum impedit saepe repellendus, totam eum ducimus aspernatur, eveniet nisi cupiditate maiores! Consequatur dolorum, sequi ipsam dolores itaque odio mollitia. Quae rerum quos corporis. Numquam, nesciunt. Voluptatum reprehenderit rerum libero magni quae alias obcaecati sunt similique dicta quas, facere unde quam commodi ut error fugiat at itaque eos, excepturi ducimus, odio ab! Dolorem dignissimos, repellat quo explicabo excepturi cumque modi minus dolor autem nesciunt commodi incidunt molestiae, veniam quae labore quis a?</p>
</section>
  <section id="documentation" h="DOCUMENTATION">
  <a class="border" href="#documentation"></a>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas voluptatem totam sint. Ducimus nulla quam similique quas, officiis vero? Nihil repellat illum corporis atque quis necessitatibus doloribus? Est consequuntur voluptatem quo, expedita molestiae tempore id minima impedit doloribus! Inventore optio laborum aliquam veritatis ad, saepe eum, quae distinctio dicta nulla odit expedita unde corporis perspiciatis eos labore odio eaque nemo cumque velit quos fugiat maiores quis! Tempore magnam, enim consequatur neque autem repellendus dolore possimus architecto facilis eveniet adipisci perspiciatis modi totam pariatur eaque, ad quas earum tempora voluptate recusandae iure impedit non? Dolore hic veritatis sit eum consequuntur incidunt laboriosam mollitia distinctio vero error voluptatibus eos, in aliquam veniam quisquam, placeat illo doloremque aliquid quod velit! Consectetur laboriosam officiis deleniti quod reprehenderit aliquam commodi modi reiciendis laborum impedit saepe repellendus, totam eum ducimus aspernatur, eveniet nisi cupiditate maiores! Consequatur dolorum, sequi ipsam dolores itaque odio mollitia. Quae rerum quos corporis. Numquam, nesciunt. Voluptatum reprehenderit rerum libero magni quae alias obcaecati sunt similique dicta quas, facere unde quam commodi ut error fugiat at itaque eos, excepturi ducimus, odio ab! Dolorem dignissimos, repellat quo explicabo excepturi cumque modi minus dolor autem nesciunt commodi incidunt molestiae, veniam quae labore quis a?</p>
    <section id="options" h="Options">
  <a class="border" href="#options"></a>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas voluptatem totam sint. Ducimus nulla quam similique quas, officiis vero? Nihil repellat illum corporis atque quis necessitatibus doloribus? Est consequuntur voluptatem quo, expedita molestiae tempore id minima impedit doloribus! Inventore optio laborum aliquam veritatis ad, saepe eum, quae distinctio dicta nulla odit expedita unde corporis perspiciatis eos labore odio eaque nemo cumque velit quos fugiat maiores quis! Tempore magnam, enim consequatur neque autem repellendus dolore possimus architecto facilis eveniet adipisci perspiciatis modi totam pariatur eaque, ad quas earum tempora voluptate recusandae iure impedit non? Dolore hic veritatis sit eum consequuntur incidunt laboriosam mollitia distinctio vero error voluptatibus eos, in aliquam veniam quisquam, placeat illo doloremque aliquid quod velit! Consectetur laboriosam officiis deleniti quod reprehenderit aliquam commodi modi reiciendis laborum impedit saepe repellendus, totam eum ducimus aspernatur, eveniet nisi cupiditate maiores! Consequatur dolorum, sequi ipsam dolores itaque odio mollitia. Quae rerum quos corporis. Numquam, nesciunt. Voluptatum reprehenderit rerum libero magni quae alias obcaecati sunt similique dicta quas, facere unde quam commodi ut error fugiat at itaque eos, excepturi ducimus, odio ab! Dolorem dignissimos, repellat quo explicabo excepturi cumque modi minus dolor autem nesciunt commodi incidunt molestiae, veniam quae labore quis a?</p>
</section>
</section>