title: Css arrow(with border) not working in input type button
body: <p>So, the code goes like this:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;input type="button" id="oneid" class="cls"&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.cls {
  border: none;
  text-align: center;
  text-decoration: none;
  top: 50%;
  transform: translateY(-50%);
  height: 200px;
  background-color: rgba(0, 0, 0, 0.3);
  display: block;
  width: 500px;
  position: absolute;
  cursor: pointer;
  }
  .cls:before {
  top: 50%;
  left: 50%;
  position: absolute;
  display: block;
  content: "";
  width: 35px;
  height: 35px;
  border-right:16px solid #000000;
  border-top:16px solid #000000;
  transform: rotate(45deg);
  }
  </code></pre>
  
  <p>I got two questions:</p>
  
  <p>1) Why can't I make the <code>:before</code> arrow show up with <code>input</code> tag, while with <code>span</code> tag instead of <code>input</code> the arrow is showing? How to make this with <code>input</code> tag? </p>
  
  <p><code>&lt;input type="button" id="oneid" class="cls"&gt;</code> -- NOT working example.</p>
  
  <p><code>&lt;span type="button" id="oneid" class="cls"&gt;&lt;/span&gt;</code> -- WORKING example.</p>
  
  <p>2) How to center the <code>:before</code> arrow correctly? Because <code>top</code> and <code>left</code> set for <code>50%</code> not really center the arrow in the middle.</p>
  
  <p>*I want a cross-browser solution and with css and html only.</p>