Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

:after not getting called

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

0
  1. #1
    This has taken me way, way too long so I'm hoping someone will be able to help
    SEMrush
    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.
    SEMrush
  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:
    26,223
    Likes Received:
    3,856
    Best Answers:
    108
    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,496
    Likes Received:
    377
    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:
    26,223
    Likes Received:
    3,856
    Best Answers:
    108
    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