:after not getting called

Discussion in 'CSS' started by sarahk, Aug 15, 2016.

  1. #1
    This has taken me way, way too long so I'm hoping someone will be able to help

    https://jsfiddle.net/axvogdq4/

    In the fiddle I have 3 columns and each of the grey bordered columns should have a small graphic in the top left corner.

    upload_2016-8-16_13-3-48.png

    because I need the graphic to sit over the border I'm using :after.

    It works for .gold:after and .silver:after but not .principal:after. The obvious problem is a typo but that all looks ok.

    upload_2016-8-16_13-6-2.png

    upload_2016-8-16_13-6-33.png

    Any clues?

    Once I have it working I can go back to the designer and get production quality images. She supplied gifs!
     
    Solved! View solution.
    sarahk, Aug 15, 2016 IP
    Paresh Shrimali likes this.
  2. #2
    
    .principal::after {
        background: blue url("http://static.nzpif.org.nz/img/pimms2/partnerspage/principal-noborder.png") no-repeat scroll 0 0;
        border: 1px solid red;
        content: "";  <<<<<<<<<< Missing in original.
        height: 96px;
        left: -6px;
        position: absolute;
        top: -6px;
        width: 96px;
        z-index: 10;   <<<<<<<<<<<<<<<< unnecessary opportunity for error.
    }
    Code (markup):
    You forgot to give it any content. It would be a Good Thing to set the parent container to {position: relative;}.

    cheers,

    gary
     
    kk5st, Aug 15, 2016 IP
    Paresh Shrimali and sarahk like this.
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #3
    oh poo, I didn't realise that was required so I took it out. Haven't needed to use :after until now.

    I would have thought the position would have been relative but the image goes awol when I make that change
     
    sarahk, Aug 15, 2016 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    I hadn't thought about its being required, but I have always had something to stick after. I just diffed a working element's styles with the non-working version. Voilà!

    Either I have misunderstood you, or vice versa. This is what I meant:
    
    .principal {
        ...
        position: relative;
        ...}
    
    .principal::after {
        ...
        position: absolute;
        ...}
    Code (markup):
    gary
     
    kk5st, Aug 15, 2016 IP
    sarahk likes this.
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #5
    aah, yep, I've got that only the relative is on .section which is generic for the 3 corner tabs and then .principal comes in just to tie to a specific image.
     
    sarahk, Aug 15, 2016 IP