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's 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%)
}
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog