burgil/highlightable-lists.html

## highlightable-lists.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol {
            list-style: none; /* Remove the default unselectable numbers */
            padding-left: 0; /* Remove the default left padding */
        }

        ol li {
            padding-left: 2em; /* Add custom padding to each item */
            position: relative; /* Make the custom selectable numbers position relative to each row */
        }

        ol li il {
            position: absolute; /* Make the custom selectable numbers position relative to each row */
            left: 0; /* Put the selectable numbers at the left of the text */
            white-space: nowrap; /* prevent the numbers and the subsequent text from breaking into multiple lines */
            width: 1.5em; /* play around with the custom selectable number position if you want */
            text-align: right; /* play around with the custom selectable number position if you want */
            margin-right: 0.5em; /* play around with the custom selectable number position if you want */
        }
    </style>
    <script defer>
        // Override all OL in the page with a custom element (can also be replaced with a span and a class name)
        document.addEventListener('DOMContentLoaded', () => {
            const ol = document.querySelectorAll('ol li');
            ol.forEach((li, i) => {
                const il = document.createElement('il');
                il.innerHTML = `${i + 1}.&nbsp;`; // Add an extra space to fix the missing space in the pasted text
                li.insertBefore(il, li.firstChild); // Incase you have more elements
            });
        });
    </script>
</head>
<body>
    <ol>
        <li>some content</li>
        <li>longer content longer content longer content longer content</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
            molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
            numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
            optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
            obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
            nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
            tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
            quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
            sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
            recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
            minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
            quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur
            fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
            consequuntur! Commodi minima excepturi repudiandae velit hic maxime
            doloremque. Quaerat provident commodi consectetur veniam similique ad
            earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
            fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
            suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
            modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
            totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
            quasi aliquam eligendi, placeat qui corporis!</li>
        <li>Hello <span style="background: green;">☮</span> World!</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam quasi aliquam eligendi, placeat qui corporis!</li>
        <li>il six</li>
        <li>il seven</li>
    </ol>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	ol {
	list-style: none; /* Remove the default unselectable numbers */
	padding-left: 0; /* Remove the default left padding */
	}

	ol li {
	padding-left: 2em; /* Add custom padding to each item */
	position: relative; /* Make the custom selectable numbers position relative to each row */
	}

	ol li il {
	position: absolute; /* Make the custom selectable numbers position relative to each row */
	left: 0; /* Put the selectable numbers at the left of the text */
	white-space: nowrap; /* prevent the numbers and the subsequent text from breaking into multiple lines */
	width: 1.5em; /* play around with the custom selectable number position if you want */
	text-align: right; /* play around with the custom selectable number position if you want */
	margin-right: 0.5em; /* play around with the custom selectable number position if you want */
	}
	</style>
	<script defer>
	// Override all OL in the page with a custom element (can also be replaced with a span and a class name)
	document.addEventListener('DOMContentLoaded', () => {
	const ol = document.querySelectorAll('ol li');
	ol.forEach((li, i) => {
	const il = document.createElement('il');
	il.innerHTML = `${i + 1}. `; // Add an extra space to fix the missing space in the pasted text
	li.insertBefore(il, li.firstChild); // Incase you have more elements
	});
	});
	</script>
	</head>
	<body>
	<ol>
	<li>some content</li>
	<li>longer content longer content longer content longer content</li>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
	molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
	numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
	optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
	obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
	nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
	tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
	quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
	sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
	recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
	minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
	quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur
	fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
	consequuntur! Commodi minima excepturi repudiandae velit hic maxime
	doloremque. Quaerat provident commodi consectetur veniam similique ad
	earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
	fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
	suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
	modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
	totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
	quasi aliquam eligendi, placeat qui corporis!</li>
	<li>Hello <span style="background: green;">☮</span> World!</li>
	<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam quasi aliquam eligendi, placeat qui corporis!</li>
	<li>il six</li>
	<li>il seven</li>
	</ol>
	</body>
	</html>