Chrome Bug with JavaScript and Display None in Pseudo-Element Workaround

Chrome Bug with JavaScript and Display None in Pseudo-Element Workaround

by Nirvanachain

HTML

<div class="container">
    Lorem ipsum opsum ida da ta.
</div>

CSS

.container {
    border: 1px solid #000000;
    position:relative;
    width: 100%;

}
/** Chrome version 33 has a bug that won't allow the javascript method .getPropertyValue() to find the value of a pseudo-element with display:none.  Use this work around to hide pseudo-element content that javascript uses **/
.container:after {
    visiblity: hidden;
    font-size: 0;
    content: 'smallContext';
}

JavaScript

var x = window.getComputedStyle(document.querySelector('.container'), ':after').getPropertyValue('content');

console.log(x);