如何创建超链接侧栏？

如何解决如何创建超链接侧栏？

我一直很遗憾，浏览器不提供任何对嵌套<h1>-<h6>和<section>嵌套的结构清晰页面的支持。因此，现在我尝试滚动my own（很遗憾，没有js，效果很好，除非菜单一直显示到鼠标移出为止）。我有3个目标：

1. 可视化嵌套结构-用从<section>的标题到结尾的蓝色左边框
2. 为它们提供了一个面包屑功能–使用title属性完成，但是笨拙地嵌套了<div>来取消内容的标题，因此其工具提示仅在左侧。
3. 链接侧栏以添加书签或跳转到标题。不知道该怎么做。如果我将<section>放到<a>中，则整个内容将成为超链接，对于href，似乎与在内容上取消标题的方式不一样。

您将如何实现？我是否需要一种完全不同的方法，例如在<a>的左侧放置一个空的<section>并通过一些魔术使其变高呢？另外，我将在相同的2个区域中进行划线，蓝色的5像素和白色的10像素，其中还应该包含标题和链接，以使其更容易错过

解决方法

那是一个有趣的话题。我建议使用由<a>伪元素扩展的::before标记，然后使用绝对定位以不使整个<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,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,veniam quae labore quis a?</p>
</section>
</section>