title: How to put CSS content in select box and rotate it?
body: <p>I want put CSS generated content in select box, and rotate it with CSS. When I try, it rotates the select box and the generated content, but the generated content ends up outside the select box.</p>
  
  <p>How can I fix it?</p>
  
  <p><a href="http://jsfiddle.net/n53D9/2/" rel="nofollow">Jsfiddle DEMO</a></p>
  
  <pre><code>&lt;div class="styled-select"&gt;
      &lt;select&gt;
          &lt;option&gt;Here is the first option&lt;/option&gt;
          &lt;option&gt;The second option&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  .styled-select select {   
     padding: 5px;
     border: 1px solid #ccc;
     font-size: 16px;
     height: 34px;
     -webkit-appearance: none;
     margin: 100px;
  
  /*following here
  
      content: "»";
  
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      */
  }
  .styled-select select:after {
      content: "»";
      display: block;
      writing-mode: tb-rl;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      position: absolute;
      bottom: 9px;
      font-size: 24px;
  
      /* Internet Explorer */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }
  </code></pre>