Div: After - Add Content After Div

DIV :after - add content after DIV

Position your <div> absolutely at the bottom and don't forget to give div.A a position: relative - http://jsfiddle.net/TTaMx/

    .A {
        position: relative;
        margin: 40px 0;
        height: 40px;
        width: 200px;
        background: #eee;
    }

    .A:after {
        content: " ";
        display: block;
        background: #c00;
        height: 29px;
        width: 100%;

        position: absolute;
        bottom: -29px;
    }

Is it possible to generate an HTML div with CSS ::after pseudo element

You can use the code below to achieve the needed effect:

   .element-container{    display: flex;    position:relative;    width: 300px;    height: 100px;    z-index: 1;}.element{    width: 100%;    height: 100%;    position: absolute;    background-color: Transparent;    background-repeat:no-repeat;    border-radius: 20px;    display: inline-block;    border: 2px solid black;}.element:after{    content:'';    display: inline-block;    top: 10%;    left: 4%;    border-radius: 20px;    background-color: yellow;    height: 100%;    width: 100%;    position: absolute;    z-index: -1;}

<div class="element-container">  <div class="element"></div></div>

The best way of inserting a div after a specific element with javascript

const test = document.getElementById('test');
const five = document.getElementById('five');

five.parentNode.insertBefore(test, five);

How to insert a div after another jquery

You could use .after() function :

var div=$('<div id="new">new</div>');var sopra=$('#home');
$( sopra ).after( div );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="home">home</div>

Insert extra div after every X divs

You can try it like this:

var divs = document.getElementsByClassName('special-divs');
var afterHowMany= 5;

for( var i = 0; i < divs.length; i+=afterHowMany )
    divs.slice(i,i+afterHowMany).wrapAll('<div class="inserted-div"></div>');

This recursively adds a new div after every 5 elements. You can take any other number apart from 5 as well.

How to insert an element after another element in JavaScript without using a library?

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

Where referenceNode is the node you want to put newNode after. If referenceNode is the last child within its parent element, that's fine, because referenceNode.nextSibling will be null and insertBefore handles that case by adding to the end of the list.

So:

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

You can test it using the following snippet:

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

<div id="foo">Hello</div>

Why is the pseudo content :after not shown after but in the corresponding div?

The :after content comes within the scrollable area because even though the element is named :after, it is in actual terms a child of the div.box and hence will be positioned within the .box element (that is within the scrollable area).

From MDN: The CSS ::after pseudo-element matches a virtual last child of the selected element.

(emphasis mine)

So the code in question in essence becomes the same as the following snippet.

div.box {    background-color: #FAA;    width: 10em;    overflow: scroll;}div.box .after {    display: block;    background-color: #AFA;    width: 5em;    overflow: auto;}

<div class="box">x  <div class="after">☑</div></div>

How can I add an element after another element?

try using the after() method:

$('#bla').after('<div id="space"></div>');

Documentation

Div: After - Add Content After Div