Code block $ prefix

I use the DigitalOcean community tutorials a lot for examples how to setup up different things in Linux (Nginx, MySQL, firewall, ...) and would also advice everyone to use them.

About 3 weeks ago I actually noticed something about their code blocks, some of them (containing terminal commands) started with $, nothing strange about that right?
Well actually it is because you can't copy it, it will only copy the code after the $ prefix. An example of this can be found here.

This caught my interest, I have never noticed this before and couldn't find any good examples how this was done. So I digged through the page source code and found the magical source code for this little piece of art.

It is actually a combination of some good old HTML combined with a little CSS magic. I will try to explain the different parts and at the end show a working JSFiddle example.

HTML
The HTML part is actually pretty simple. It is the normal code block syntax with an unordered list in it. This example shows a code block with multiple lines but of course if you only want a one-line code block you can do the same with only one list item (<li>).

<pre>
    <code>
        <ul class="prefixed">
            <li class="line">sudo apt-get update</li>
            <li class="line">sudo apt-get install apache2</li>
            <li class="line">sudo apache2ctl configtest</li>
        </ul>
    </code>
</pre>

CSS
I will split this part up into smaller sections.

This first part is only used to reduce the spacing between each list item. Nothing special about it.

pre .prefixed {
    white-space: normal;
    margin: 0;
}

Okay now we are getting to the first important part. list-style-type is used to remove the default list item style: •

pre .line {
    list-style-type: none!important;
}

This last part is used to actually add the $ prefix in front of the code block. The first part is to make sure that a user can't copy it. The margins are used to add a little spacing around the prefix, of course can be adjusted how you like.
The most important part is content: "$";, this adds the prefix that we want to all the lines above.

pre .line::before {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    content: "$";
    margin-right: 10px;
    margin-left: 5px;
}

Bonus
I wanted to add this as a little bonus.
It is also possible to add different prefixes to each line without needing to make a different CSS style for each.
Add the prefix attribute, with any value that you like.

<li class="line" prefix="$">sudo apt-get install apache2</li>

In the last CSS block replace content: "$"; with this. It will get the attribute value and use that as the prefix instead.

content: attr(prefix);

This was my first time giving a coding tutorial so I hope you like it. Any feedback is of course welcome.