get pseudo-element value

by Oliver Kelso

HTML

<input name="uploaded_file" id="uploaded_file" type="file" onchange="thing()"/>

CSS

input[type="file"]::-webkit-file-upload-button{ visibility:hidden;width:0;height:0;}
input[type="file"]{font-size:30px !important;background:none !important;}
input[type="file"]::before{
  content: 'Select an image';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-size: 40px;
  margin:auto auto;
  text-align:center;
  line-height:80px;
  width:624px;
  height:80px;border:0;border-radius:40px;
  margin-left:-24px;
}

JavaScript

function thing(){
    var f = document.getElementById("uploaded_file").files[0].name;
    var t = window.getComputedStyle(document.getElementById("selector"), ':before').getPropertyValue('content');
    console.log(t);
}