JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo bibendum venenatis. Praesent velit justo, porttitor nec suscipit volutpat, condimentum a diam. Sed vitae felis id quam euismod pharetra. Quisque pretium pulvinar tortor sed tincidunt. Nulla congue, neque mollis gravida consequat, enim tortor cursus purus, et rhoncus metus odio vel libero. Vivamus consectetur fringilla lorem, et elementum urna adipiscing sit amet. Nullam pharetra, risus non pretium euismod, turpis turpis faucibus felis, et interdum ligula velit posuere justo. Donec augue nulla, fringilla ac venenatis a, tempor ut mi. Praesent ante enim, sodales et eleifend at, ullamcorper vel enim. Nulla mattis egestas tempor. Aliquam tempus, arcu non viverra ornare, neque orci iaculis mi, sit amet euismod nisl nulla ac justo.</div>

CSS

#demo{
    font-family: sans-serif;
    width:300px;
    height:200px;
    margin: 20px auto;
    border: 1px solid #eee;
    padding: 10px;
    color: #999;
    overflow:auto;
    
}

#demo:before{
    color:red;
}

#demo::-webkit-scrollbar {
    width: 10px;
    height:10px;
}
 
#demo::-webkit-scrollbar-track {
    background:#272B2F;
    border-left:1px solid #000;
}
 
#demo::-webkit-scrollbar-thumb {
    background:#BDE052;
}

JavaScript

// Retrieve elements and their pseudo elements

var nodes = function(){
    var els = [],
        all = document.all,
        i;
    for(i = 0; i< all.length; i++){
        var cur = all[i],
            cs = getComputedStyle(cur, ':before');
        console.log([cur, cs]);
    }
    return els;
};


console.log(nodes());