CSS可以使元素出现两次吗？

Question

假设您的页面很长。您的链接<nav>显示在顶部。但是随着读者向下滚动，它从顶部移开。当它们到达文章末尾时，您不想将它们滚动回到顶部，而是希望将相同的<nav>内容放在页脚中。

无需在源代码中重复您自己的内容，CSS中是否有一种方法可以使元素像这样在多个位置出现？

（PS只是一个示例，因此我们需要具体参考。对于这种设计的可用性/用户体验争论，我并不特别感兴趣；当然，更常规的解决方案是将<nav>屏幕停留在屏幕上，滚动。）

Answer 1

抛开用户体验和可访问性的争论不谈——答案是肯定的。有点。

您可以使用:after和position:absolute将 css 添加content到锚标记，然后将其放置在页面底部 ( bottom: 0)。浏览器（据我测试）会将position:absolute :after锚点的内容视为锚点的一部分（这意味着您可以单击它，即使原始锚点命中框不在 附近:after content）。

这里的问题是：父元素中不能有position:relative或。position:absolute如果这样做，那么:after内容将完全固定在该父元素的底部。

在布局方面 -:after内容将与原始锚文本的末尾内联。您需要使用transform:translateX将文本再次向左移动。值-100%会将文本完全向左移动，以便:after文本直接显示在原始链接下方。

这仅适用于平面导航样式（无下拉菜单）。

您需要将链接文本移动到锚点的属性内（我选择了标签title）作为content回显的内容。因为我不喜欢属性内和 HTML 中的相同文本，所以我从锚点中删除了文本。

nav a:after {
  position: absolute;
  content: attr(title);
  bottom:0;
  transform: translateX(-100%);
}

nav a:before {
  content: attr(title);
}

body,
html {
  height: 100vh;
}

<nav>
  <a href="#1" title="1"></a>
  <a href="#2" title="2"></a>
  <a href="#3" title="3"></a>
</nav>

Answer 2

否。元素是在DOM中创建元素的HTML领域。CSS仅是这些元素的表示，不能创建它们，不，::before等不一样。是的，javascript可以将元素插入DOM，但这不是问题。