CSS Trick: Display Language Name in Code Snippet

By Xah Lee. Date: . Last updated: .

If you write tutorials or blogs about programing, often you have code examples in a “pre” tag, such as <pre class="python">…</pre>.

You can make the language name displayed around the border, like this.

html css code snippet with language name screenshot
Code Snippet with language name shown.

Here is a CSS code that does it.

pre.python:after {
    content:"Python₂";
    position:relative;
    bottom:-1em;
    right:-2ex;
    float:right;
    color:gray;
    background-color:hsl(0,0%,95%)
}