In this article I want to show how to add text in your website that can not be selected or copied. It should be useful in lists of texts or lines of code you want to show. We realize that is very easy to do that.
Solution using pseudo-elements
The content property helps us to add text in our html tags. The reason that it works is the content property is adding a text but not updating the DOM, so It can not be copied.
<p data-pseudo-content="Lorem Ipsum"></p> [data-pseudo-content]::before {
content: attr(data-pseudo-content);
}
Using (-prefix-)user-select: none
Another valid option is using user-select: none, it works in all major Browsers (IE10+), but it does not prevent in all browsers. Also, it is not part of CSS standard.
.unselectable {
-moz-user-select: none;
webkit-user-select: none;
ms-user-select: none;
}Live Example