Firefox 4 Not Rendering A:Visited::Before (Except Color)

Cannot change the content of visited :before pseudo-elements

The allowed (= not ignored) CSS properties of visited links are color, background-color, border-*-color, outline-color and, column-rule-color (more under certain circumstances).

This is to prevent history stealing attacks. See this article for further details.

So you can, technically, set a :before pseudo class for :visited links, but it will be ignored and appears as if the links are not visited. This is not a bug, it's a feature ;)

Why not :visited instead of a:visited for links?

TL;DR: At the time of writing, you are completely correct; there is no difference between a:visited and :visited. However, using a:visited is best practice for future-proofing your code.

TL;DR EDIT: As of August 2016, the CSS4 Working Draft allows other tags to use :visited. There is now a functional difference between a:visited and :visited! Beware.

For web development languages today, specifically HTML5 and CSS3, you are right: there is functionally no difference between a:visited and :visited. Now, please take this with caution: web standards, elements, and user interface protocols are ever-evolving, meaning that in the future, it is possible that a new tag compatible with :visited may be introduced.

When :visited was introduced in CSS, the W3C CSS1 spec said:

In CSS1, anchor pseudo-classes have no effect on elements other than 'a'. Therefore, the element type can be omitted from the selector:
a:link { color: red } == :link { color: red }

HOWEVER, in the CSS2 spec, the behavior of the :visited pseudo-class was not restricted to just a tags:

The document language determines which elements are hyperlink source anchors. For example, in HTML4, the link pseudo-classes apply to a elements with an "href" attribute.

This means that it is up to the document language and browser to determine which elements are compatible with :visited. While the current industry standard states that for HTML, only a elements with an href attribute qualify, this may well change later down the line.

EDIT, August 2016: Looks like the CSS4 Working Draft has confirmed my suspicion; in the new spec, :visited can be used for other "link-like" elements, namely <area> and <link>. The spec says:

The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [HTML5], any <a>, <area>, or <link> elements with an href attribute are hyperlinks.

So <a>, <area>, and <link> are all treated as hyperlinks, and the spec says that :visited applies to all hyperlinks. So as of CSS4, you'll be better off including the a in a:visited.

a:visited links - opacity not working

Not possible. You can only use the :visited selector to change the color of an element. Thus opacity doesn't work.

SEC7115

:visited and :link styles can only differ by color.

Reference here - Was unable to find W3 documentation stating it..

Styling visited links via bookmarklet?

The behavior of :visited was changed a couple of years ago due to security reasons ... while your code (and the squarefree bookmarklet) might work on older browsers, you won't be able to get the same impact in latest versions of the browsers

A note from https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/

Visited links can only be different in color: foreground, background, outline, border, SVG stroke and fill colors. All other style changes either leak the visitedness of the link by loading a resource or changing position or size of the styled content in the document, which can be detected and used to identify visited links.

Other useful references:

http://www.azarask.in/blog/post/socialhistoryjs/ - what was the security problem (and its creative use)
http://dbaron.org/mozilla/visited-privacy - approach for the fix

For CSS, you can try for something like:

a:visited {
    color: white !important; /* It would hide the text if the background is white too */
    /* or some better css approach for your requirement */
}

How can I set different icons for visited and unvisited external links with CSS?

In theory you could try using the a:visited:before or the :after selector in combination with an icon font like Font Awesome, which would look something like:

a:visited:before {
   content: "\icon-code";
}

Or you could use your background-image:

a:visited:before {
   content: " ";
   background-image: url('your-background-image.jpg');
   height: 10px;
   width: 10px;
}

However, beware that the :visited selectors have restrictions regarding psuedo-elements in modern browsers (to protect your privacy); for example in Firefox 4 you are only allowed to change an a:visited links' (border) colors (look here and here for reference).

Thus, as mentioned by other answers, the above will not work in production because popular browsers will not render it (per W3 school and Mozilla Developer Network).

Direct quote from the Mozilla Developer Network on the issue:

Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used).

And you'd say that's the end of that, but it's not!
There (1) are (2) a lot (3) of interesting ways to circumvent these restrictions (for a detailed blog post with a lot of references to this issue, you can look here on CSS-tricks).

For example, one of the tricks is to style two a elements that link to the same href, and style the first one to be an icon. When someone clicks on the link with text, the a in front also gets affected.

Here's an example from the previously linked Quora post (which is based on the DuckDuckGo's visited feature) (which sadly won't work as a working snippit due to it working with links):

<h2 class="result__title">
   <a class="result__a" href="https://google.com">Link to Google
   </a>
   <a class="result__check" href="https://google.com">
       <span class="result__check__tt">Link icon</span>
   </a>
</h2>

Now in your CSS you make the .result__check only show up (in your stylesheet) if you've visited the link!

.result__check:before{
    content: "\2611";
}
.result__check {
    color: #fff;
    position: absolute;
    right: 100%;
    top: 0.3em;
    margin-right: 1em;
    font-size: 0.8em;
    width: 1em;
    white-space: nowrap;
}
.result__check:before{
    display: inline-block;
    float: right;
}
// This is what gives the color to the visited item
.result__check:visited {
    color: #c3c3c3;
}
.result__check__tt {
    visibility: hidden;
    opacity: 0;
    background-color: #a3a3a3;
    background-color: rgba(138,138,138,0.9);
    padding: 0 1em;
    font-size: 0.76em;
    line-height: 2;
    position: absolute;
    bottom: 2.5em;
    left: -0.95em;
    z-index: 200
}
.result__check__tt:before {
    content: "";
    display: block;
    position: absolute;
    margin-left: -0.5em;
    bottom: -0.5em;
    left: 1.5em;
    border: 0.5em solid transparent;
    border-bottom-width: 0;
    border-top-color: #a3a3a3;
    border-top-color: rgba(138,138,138,0.9)
}
.result__check:hover .result__check__tt {
    visibility: visible;
    opacity: 1
}

That way, you are able to style the :visited element, even though browsers restrict it. Hope it helps!

Css content Image not showing up on Firefox

content is not meant to be used this way. It's use is limited to :before and :after pseudo elements.

In your case, the best option is to use background-image instead:

.post-content-contract {
    background-image: url(contract.png);
    background-size: cover;
    width: 100px;
    height: 80px;
    ...
}