Using CSS to Duplicate HTML Elements

using css to duplicate html elements

Sort of Possible, But Still Not Sure You Would Want To

And poses some serious challenges which varies depending on the context.

One problem is that your stated goal is to reduce html clutter and redundancy. However, to have a link, you still need to have an anchor element (<a></a>) as the root for the link.

Nevertheless, one way you could do something like that with today's browsers (now that pseudo-elements are more generally supported) is to divorce the text from the a which leaves an empty anchor in your code. So you still have the HTML a in the code, but eliminates any redundant text. How useful really is that? Not very is my thought. Especially if you are dealing at all with inline links that are part of the text, because what you would do is then add text to those links via the pseudo-element, something like:

a[href='#oneUrl']:before {
    content: 'your anchor text';
}

Look at this fiddle example.

However, there is another way that reduces HTML further, but has some other severe limitations. You could have links in the text itself (let's say), which allows for relevant real content wording in those. However, each of those can have two (max at present) pseudo-elements associated that could "extend" to be separate links in headers, footers, etc. Look at this fiddle example. Obviously, this requires you to be able to precisely locate those links (perhaps using position: fixed as the example has), which can be challenging. A big issue, however, is that search engines are not going to pick up those extra links or their text, and screen readers are not either, so your "main navigation" actually becomes invisible to some extent. That would seem to be undesirable to me, but it does indeed limit your html redundancy.

Duplicate an element and overlay it using css

Using psuedo element and content: attr(data-title); you can easily achieve this, all you have to do is play with the right Font Families

Code Snippet:

.button {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  background: transparent;

  display: inline-block;

  height: 42px;

  padding: 0 1.5em;

  position: relative;

  border: none;

  outline: 0;

  text-align: center;

  font-family: 'Open Sans', sans-serif;

  font-size: 40px;

  line-height: 44px;

  color: #000000;

  font-weight: 800;

  letter-spacing: 1.5px;

  text-transform: uppercase;

}

.button:after {

  content: attr(data-title);

  z-index: 1;

  font-size: 30px;

  color: #f00;

  font-weight: 100;

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,800" rel="stylesheet">

<a href="javascript:void(0);" class="button" data-title="ABC">ABC</a>

Is it possible to duplicate `div` in css?

No, there's no construct like that in CSS.

How to replicate HTML elements with Loop in javascript

Use .cloneNode

var child = document.getElementById('child');

var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {

  father.appendChild(child.cloneNode(true))

}

<div id="father">

  <div id="child" class="row mt-5">

    <div class="col-sm-8">

      <h2 class="news" id="">News</h2>

    </div>

  </div>

</div>

---

Related Topics