0
3

[–] QuantumWannabe 0 points 3 points (+3|-0) ago  (edited ago)

Here is how to do it for all three text types (using the same syntax that you described in your post):

/* Your existing code to show images. I moved them out of the '::after' pseudo element for simplicity */
a[href="#spoiler"] {
    background-image: url( https://i.imgur.com/uqPXQ8K.gif );
    background-position: 0px 0px;
    display: block;
    height: 178px;
    width: 320px;
}

a[href="#sauce"] {
    background-image: url( https://i.imgur.com/RFbYygC.gif );
    background-position: 0px 0px;
    display: block;
    height: 281px;
    width: 500px;
}

/* Handling the top text. This styles what the text looks like and positions the top text (centers it and gives it some padding to move it down) */
a[href="#sauce"], a[href="#spoiler"] {
    position: relative;
    text-align: center;
    padding-top: 2px;
    color: #FFF !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, -1px -1px 0px #000, 1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000;
    cursor: default;
    font-size: 18px;
    font-family: sans-serif;
}

/* Since our parent, the a tag, has 'position:relative' we can position the child `strong` tag with `position: absolute`. */
a[href="#sauce"] strong, a[href="#spoiler"] strong {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 4px;
    font-weight: normal;
}

/* Hover text works by markdown creating a title attribute for the link tag and needs no CSS */

Example post in my test subverse that you can inspect

0
2

[–] moe [S] 0 points 2 points (+2|-0) ago 

Thank ya' very much! /v/moe/comments/79578

@Nurdoidz, you can flag this as "Resolved" now :3