Theorems in MathJax - amsmath-like custom names with improved CSS

In LaTeX, using the amsthm package, one can write

\begin{theorem}[Prime numbers]
All odd numbers are prime
\end{theorem}

to get

To reproduce this functionality in HTML using MathJax, one can define a style as

.theorem {
display: block;
font-style: italic;
}
.theorem:before {
content: "Theorem. ";
font-weight: bold;
font-style: normal;
}
.theorem[text]:before {
content: "Theorem (" attr(text) ") ";
}

and then write

<div class="theorem" text='Prime numbers'>
All odd numbers are prime.
</div>

to get

This solution has a history to it. Zachary T. Harmany first explained how one can use CSS classes to get theorem-like environments in HTML. In my previous blog I reported on how extend these classes to allow for custom theorem names like in amsthm. Later, this solution stopped working in some browsers, and it was Paul Siegel who came up with the solution shown above that now works again in all browsers.

You can use this JSFiddle to play around with the above implementation.