Reddit Spoiler CSS Code

/* Instructions to Configure:

1) Add new link flair template with CSS class of "spoiler" (without quotes) and a flair text of "Spoilers" (Be sure to save!)

2) Add this Pastebin entry into your subreddit's CSS

3) Make sure "allow submitters to assign their own link flair" and "enable user flair in this subreddit" are checked and a valid link flair position is set. Be sure to save the options!

4) Upload a 70x70 image named "spoiler-image" (without quotes) to be the spoiler icon. If you don't want to make one, you can get one at https://j-co.ga/spoiler.png

5) Tell everyone to apply the flair for spoilers.

You can see a demo of this in action at /r/SpoilerCSSTesting */

/* Start Spoiler CSS */
/* Updated on January 27th, 2016 at 22:30 UTC. */

.linkflair-spoiler a.title:before {
    color: teal!important;
    text-shadow: 0 0 0px teal!important;
    content: "Spoiler: ";
}

.linkflair-spoiler a.title {
   color: transparent!important;
   text-shadow: 0 0 7px teal!important;
}
.linkflair-spoiler a.title:visited {
    color: teal!important;
    text-shadow: 0 0 0px teal!important;
    visibility: visible!important;
}
.linkflair-spoiler a.title:hover {
    color: teal!important;
    text-shadow: 0 0 0px teal!important;
    visibility: visible!important;
}

.linkflair-spoiler:hover {
    text-shadow: 0 0 0px teal;
    visibility: visible!important;
}

.linkflair-spoiler .thumbnail img { display: none }

.linkflair-spoiler .linkflairlabel {
    background: transparent;
    border-color: teal;
    color: teal;
    text-transform: uppercase;
}

.linkflair-spoiler .thumbnail {
    background-image: url(%%spoiler-image%%);
    background-position: 0px 0px;
    width: 70px;
    height: 70px;
}

a[href|="#spoiler"],a[href|="#spoiler"],body:lang(bc) a[href|="#spoiler"],body:lang(bc) a[href|="#spoiler"] {
    text-shadow: 0 0 7px teal;
    color: transparent!important;
    cursor: text;
}

a[href|="#spoiler"]:before,a[href|="#spoiler"]:before,body:lang(bc) a[href|="#spoiler"]:before,body:lang(bc) a[href|="#spoiler"]:before {
    text-shadow: 0 0 0px teal;
    color: teal;
    content: "Spoiler: ";
    cursor: text;
}

a:hover[href|="#spoiler"],a:hover[href|="#spoiler"],body:lang(bc) a:hover[href|="#spoiler"],body:lang(bc) a:hover[href|="#spoiler"] {
    text-shadow: 0 0 0px teal;
    color: teal;
    cursor: text;
}

a[href|="/spoiler"],a[href|="/spoiler"],body:lang(bc) a[href|="/spoiler"],body:lang(bc) a[href|="/spoiler"] {
    text-shadow: 0 0 7px teal;
    color: transparent!important;
    cursor: text;
}

a[href|="/spoiler"]:before,a[href|="/spoiler"]:before,body:lang(bc) a[href|="/spoiler"]:before,body:lang(bc) a[href|="/spoiler"]:before {
    text-shadow: 0 0 0px teal;
    color: teal;
    content: "Spoiler: ";
    cursor: text;
}

a:hover[href|="/spoiler"],a:hover[href|="/spoiler"],body:lang(bc) a:hover[href|="/spoiler"],body:lang(bc) a:hover[href|="/spoiler"] {
    text-shadow: 0 0 0px teal;
    color: teal;
    cursor: text;
}


/* End Spoiler CSS */