Ajax Loader
×
HTML 
Our company, <span data-cssnotranslate="Coconuts">Coconuts</span> is pretty stylish.
1
Our company, <span data-cssnotranslate="Coconuts">Coconuts</span> is pretty stylish.
2
<br><br>
3
Our company, <span data-jsnotranslate="Coconuts">Coconuts</span> is pretty scripted.
4
<br><br>
5
Our company, Coconuts is pretty translated :(
 
CSS 
[data-cssnotranslate] {
1
[data-cssnotranslate] {
2
  position: relative;
3
  visibility: hidden;
4
}
5
[data-cssnotranslate]::before {
6
  content: attr(data-cssnotranslate);
7
  left: 0;
8
  position: absolute;
9
  top: 0;
10
  visibility: visible;
11
}
 
JavaScript 
document.addEventListener("DOMContentLoaded", function () {
1
document.addEventListener("DOMContentLoaded", function () {
2
  var replaces = document.querySelectorAll("[data-jsnotranslate]");
3
  for(var i = 0, j = replaces.length; i < j; i++) {
4
    replaces[i].innerHTML = replaces[i].dataset.jsnotranslate;
5
  }
6
});
 

Prevent translation with pseudo-element

CSSDeck G+