:after doesn't put element after

HTML & CSS
1

Hi all

I have a demo here - http://www.ttmt.org.uk/after/

It’s just a div with a set height and width.

I’m using :after to place ‘//’ after the div but the ‘//’ appears inside the div.

Why doesn’t the ‘//’ appear after the div.

2

You’ll have to absolutely position it.


#box:after {
    content: "//";
    display: block;
    font-size: 100px;
    position: absolute;
    right: 1em;
    top: 1em;


}
3

So the content isn’t added after but positioned relative to the element it’s placed after

4

:after places its object after anything in the container to which :after is applied. It does not place its object outside of the container to which it is applied.

Why not just put the “//” marks inline and outside of div.box if you want them outside and to the right of the container?

Here’s a little demo that might help explain how the :before and :after pseudoclasses work:

Change the display property of the :before and :after objects and see what happens.

Notice that the outline color around the paragraph is cyan and that the :before and :after objects are always inside of the paragraph container.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
    Experiment: Select inline-block or block for the :before and :after objects.
-->
<head>
    <title>before & after</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

body {
    background-color:#eee;
}

div {
    outline:4px solid magenta;
    background-color:#fff;
    width:700px;
    height:200px;  /* */
    margin:0 auto;
}

p {
    border:4px solid cyan;
    font-size:36px;
    line-height:1.1;
    font-family:'Monotype Corsiva',fantasy;
    text-align:center;
}

p:before,
p:after {
    outline:2px solid red;
    content:" ";
    display:block;  /* */
/*    display:inline-block;  /* */
    height:50px;
    width:1px;
    margin:0 auto;
}
p:after {
    outline:2px solid blue;
}

    </style>
</head>
<body>

<div>
    <p>Once Upon A Time In A Faraway Land</p>
</div>

</body>
</html>
5

It’s a common misconception but as Ron said above :after places the generated content after any content inside the specified element. It places content after the original content. It does not put the content after the element.

The same applies to :before and generated content is added before any content in that element. It doesn’t need to be positioned (unless you want it so) and will take up its place in the normal flow of that element as if it had always been there from the start.

Think of it as “after content inside that element” and not “after the element”.