JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- css before and after pseudoelements -->


  <a href="#" class="button">
        Button
    </a>


  <p id="someElem">In CSS 2.1, it is not possible to refer to attribute values 
     for other elements than the subject of the selector.</p>

CSS

a.button {
            background-color: #F0F0F0 ;
            border: 1px solid #CCCCCC ;
            border-radius: 4px 4px 4px 4px ;
            color: #333333 ;
            display: block ;
            font-size: 30px ;
            padding: 6px 30px 4px 58px ;
            text-decoration: none ;
            position:relative;
            width: 100px ;
        }

 a.button:before {
            background-color: #FF0066 ;
            border-radius: 3px 3px 3px 3px ;
            color: #FFFFFF ;
            content: "NEW" ;
            font-family: sans-serif ;
            font-size: 15px ;
            left: 9px ;
            line-height: 15px ;
            margin-top: -10px ;
            padding: 3px 3px 2px 3px ;
            text-align: center ;
            position:absolute;
            top: 50% ;
        }
 a.button:after {
            background-color: #FFFFFF ;
            border: 1px solid #DADADA ;
            border-radius: 22px 22px 22px 22px ;
            color: #333333 ;
            content: "\00BB" ;
            display: none ;
            font-size: 30px ;
            height: 28px ;
            line-height: 26px ;
            margin-top: -14px ;
            position: absolute ;
            right: 6px ;
            text-align: center ;
            text-indent: 1px ;
            top: 50% ;
            width: 28px ;
        }
 
        a.button:hover:after {
            display: block ;
        }


p:before{
 content: "Note: "   ;
}
}

JavaScript

var x = document.getElementById("someElem");

alert(x.innerHTML);