title: Create Up and Down arrow icons or buttons using pure CSS
body: <p>I am trying to create below shown "up and down" control buttons using pure CSS and no Background image.</p>
  
  <p><img src="https://i.stack.imgur.com/sLP14.png" alt="enter image description here"></p>
  
  <p>But when I added the CSS for arrows in "<code>li.className:after</code> or <code>li.className:before</code> " the position of main boxes moved.</p>
  
  <p><strong>Here is the Fiddle for the issue I am getting ></strong> <strong><a href="http://jsfiddle.net/8usFk/" rel="nofollow noreferrer">http://jsfiddle.net/8usFk/</a></strong></p>
  
  <p>Below is the Code for the same:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="positionCameras"&gt;
      &lt;ul&gt;
          &lt;li title="Move Up" class="cameraLeft" id="cameraUp"&gt;&lt;/li&gt;
          &lt;li title="Camera" class="cameraIcon"&gt;&lt;/li&gt;
          &lt;li title="Move Down" class="cameraRight" id="cameraDown"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.positionCameras ul, .positionCameras li {
      margin: 0;
      padding: 0;
      list-style: none;
      display: inline-block;
  }
  .positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
      width: 25px;
      height: 25px;
      cursor: pointer;
      background: #cccccc;
      margin: 5px;
      border-radius: 5px;
      border: 1px solid #aaaaaa;
      box-shadow: 1px 2px 15px #cccccc;
  }
  .positionCameras li.cameraLeft:before {
      content:" ";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 5px 10px 5px;
      border-color: transparent transparent #007bff transparent;
  }
  .positionCameras li.cameraIcon {
      cursor: default;
  }
  .positionCameras li.cameraRight:before {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8.7px 5px 0 5px;
      border-color: #007bff transparent transparent transparent;
  }
  </code></pre>
  
  <p>Let me know if you need any other information.</p>
  
  <p>Please suggest.</p>