SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :after doesn't put element after

    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. #2
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You'll have to absolutely position it.
    Code:
    #box:after {
        content: "//";
        display: block;
        font-size: 100px;
        position: absolute;
        right: 1em;
        top: 1em;
    
    
    }

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the content isn't added after but positioned relative to the element it's placed after

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    :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.
    Code:
    <!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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ttmt View Post
    So the content isn't added after but positioned relative to the element it's placed after
    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".


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •