JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<h2>First Title</h2>
<h2>Second Title</h2>
<h2>Third Title</h2>

CSS

h2:after {    
    font-weight : normal;
    color : #000;
    display : block;
    position : relative;
    background : #fff;
    font-size : 14px;   
    padding-top : 8px;
    padding-bottom : 8px;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

h2:nth-of-type(1):after {
    content : "First paragraph First paragraph First paragraph First paragraph";   
}

h2:nth-of-type(2):after {
    content : "Second paragraph Second paragraph Second paragraph Second paragraph";   
}

h2:nth-of-type(3):after {
    content : "Third paragraph Third paragraph Third paragraph Third paragraph";   
}

JavaScript

var h2 = document.getElementsByTagName("h2");
var s = window.getSelection();

if(s.rangeCount > 0) s.removeAllRanges();

for(var i = 0; i < h2.length; i++) {
  var range = document.createRange();
  range.selectNode(h2[i]);
  s.addRange(range);
    console.log(s, range)
};