How to include child div into parent div automatically?

Question

Is there any way how to add a child div into parent divs. The child div is still same (without changes) but content of parent div is variable. Parent div contains child div automatically like CSS div::before but with whole div in it not just text.

Basically for each parent automatically generate same child.

See figure sample of parent and child divs

How can I make it via CSS ? (or JS)

Answer 1

CSS cannot generate content (as such) it can only style it.

If the element is not present in the HTML nothing will happen.

It is possible to add "pseudo content" with a pseudo element but the primary purpose of these pseudo-elements is enhancement not addition of "content". Also they cannot contain HTML.

It would be possible to use a pseudo element with a bg image in this instance as this is essentially styling.

JSfiddle Demo

div {
    height:250px;
    width:250px;
    display: inline-block;
    margin: 25px;
    position: relative;    /* required */

}
div:after {
    content:"";
    /* required */
    position: absolute;
    bottom:25px;
    right:25px;
    background-image: url(http://www.webdevelopersnotes.com/how-do-i/thumbs/shortcut-arrow.jpg);
    height:75px;
    width:75px;
    background-size:cover;
}

.one {
    background: red;
    width:300px;
}

.two {
    background: lightblue;
    height:300px;
}

<div class="one"></div>
<div class="two"></div>