| <head> |
| <style> |
| div { |
| display: inline-block; |
| clip-path: inset(0px 1px 0px 0px); /* workaround for mac. See webkit.org/b/237816. */ |
| font-family: monospace; |
| font-size: 18px; |
| text-decoration: underline; |
| text-decoration-color: lightgreen; |
| text-decoration-thickness: 1ex; |
| text-underline-offset: -1.25ex; |
| text-decoration-skip-ink: none; |
| text-decoration-skip: none; |
| } |
| div::selection { |
| color: red; |
| background: transparent; |
| } |
| </style> |
| </head> |
| <div id="target">Hello I have a cool underline</div> |
| <script> |
| var target = document.getElementById("target").firstChild; |
| getSelection().setBaseAndExtent(target, 0, target, 5); |
| </script> |
