Can CSS make an element appear twice?

user_3623267 0
Viewed 1646

Let's say you've got a long page. You've got your links in a <nav> that appears at the top. But as the reader scrolls down, it goes off the top. When they get to the end of the article, instead of making them scroll back to the top, you want to put the same <nav> content in the footer.

Without repeating yourself in the source, is there a way in CSS to make an element appear in more than one place like this?

(PS This is just an example so we have something concrete to refer to. I'm not particularly interested in usability/user experience arguments about this design; a more normal solution, of course, would be to make the <nav> stay on-screen while scrolling.)

css html
3 Answers

No. Elements are the realm of HTML which creates the element in the DOM. CSS is presentation of those elements only and cannot create them and, no, ::before et al is not the same thing. Yes, javascript can insert elements into the DOM but that's not the question.

user_1626980

Arguments for User Experience and Accessibility aside - the answer is Yes. Sorta.

You can use :after and position:absolute to add css content to an anchor tag, then place it at the bottom of the page (bottom: 0). Browsers (as far as I've tested) will treat position:absolute :after content of an anchor as part of the anchor (meaning you can click on it, even if the original anchor hitbox is no-where near the :after content).

The gotcha here is: none of the parent elements can have position:relative or position:absolute on them. If they do, then the :after content will become absolutely fixed to the bottom of that parent element.

In terms of layout - the :after content will be inline with the end of the text of the original anchor. You need to use transform:translateX to shift the text to the left again. A value of -100% will shift the text fully to the left so the :after text appears directly under the original link.

This will ONLY work for a flat navigation style (no drop-down menus).

You will need to move the link text inside an attribute of the anchor (I've chosen the title tag) as something for the content to echo out. And because I don't like the same text inside an attribute AND in the HTML I've removed the text from the anchor.

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>

user_3517850

I believe you may have a mis-understanding on what CSS does and what it is for.

CSS takes your HTML, makes it pretty, and shows it to the user. That's it. That being said, CSS has taken major strides in the past few years, where we can now make animations, transitions, etc. However, these are still "making it pretty".

Once you enter the realm of "duplicating", it falls short. Only Javascript can modify a page like this, but most likely you are:

  1. Not looking to use Javascript (for whatever reason)
  2. Hoping you can do this simply

Well, there's good news. You can accomplish this without Javascript, and rather just use HTML/CSS to do it.

To do this, you'll need to have two <nav> elements. Luckily, most of the work of making it look nice will be taken care of by shared CSS classes.

Unfortunately, in order to keep them in sync without having to edit both <nav> elements when making a change, you'll need to utilize Javascript.

user_30789110
Related