semitransparent-decoration-line.html (1279B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>semitransparent-decoration-line</title> 6 <style> 7 * { 8 text-decoration-skip-ink: none; 9 } 10 .underline { 11 text-decoration: underline rgba(0,0,0,0.3); 12 font-size: 2em; 13 } 14 .overline { 15 text-decoration: overline rgba(0,0,0,0.3); 16 font-size: 2em; 17 } 18 .line-through { 19 text-decoration: line-through rgba(0,0,0,0.3); 20 font-size: 2em; 21 } 22 ::-moz-selection { 23 background-color: white; 24 color: black; 25 } 26 </style> 27 <script type="text/javascript" charset="utf-8"> 28 function select() { 29 window.getSelection().removeAllRanges(); 30 var elems = document.getElementsByTagName('p'); 31 for (var i = 0; i < elems.length; ++i) { 32 var range = document.createRange(); 33 range.setStart(elems[i].firstChild, 2); 34 range.setEnd(elems[i].firstChild, 9); 35 window.getSelection().addRange(range); 36 } 37 } 38 </script> 39 </head> 40 <body onload="select()"> 41 <p class="underline">Lorem ipsum dolor sit amet</p> 42 <p class="overline">Lorem ipsum dolor sit amet</p> 43 <p class="line-through">Lorem ipsum dolor sit amet</p> 44 </body> 45 </html>