JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<aside>
    <input type="checkbox" />
    <main>
        <table>
            <caption>Table</caption>
            <tr>
                <td data-one="Data One" data-two="Data 2"></td>
            </tr>
        </table>
    </main>
</aside>
<main>
    <table>
        <caption>Table</caption>
        <tr>
            <td data-one="Data One" data-two="Data 2"></td>
        </tr>
    </table>
</main>

CSS

input[type=checkbox] {
    display:block;
    visibility:hidden;
    width:0;
    margin:0;
    cursor:pointer;
}
input[type=checkbox]:after {
    position:fixed;
    left:0;
    display:block;
    visibility:visible;
    width:10%;
    padding:.5em 0;
    text-align:center;
}
input[type=checkbox]:after {
    content:"Data 1";
    background:#FCC;
}
input[type=checkbox]:checked:after {
    content:"Data 2";
    background:#CCF;
}
main table td:before! aside input[type=checkbox]:checked  {
    /*This part is not working*/
    content:attr(data-two);
}
td:before {
    display:block;
    content:attr(data-one);
}