title: Using the CSS :after pseudo-selector to display directional carets in Bootstrap 3 input-groups
body: <p>I've been trying to apply carets to input-group elements in Bootstrap 3. Failing so far. Tried using table-cell display for the inserted pseudo element, tried absolute positioning, tried using the content property to display a web font caret instead of my preferred CSS triangle caret. Just can't wrap my head around this one.</p>
  
  <p><a href="http://jsfiddle.net/YG8Lt/1/" rel="nofollow">Here's a JSFiddle</a> (the red borders being where I'd expect the caret to show).</p>
  
  <pre class="lang-css prettyprint-override"><code>.input-group .input-group-addon:last-child:before,
  .input-group .input-group-btn:last-child:before,
  .input-group .input-group-addon:not(:last-child):before,
  .input-group .input-group-btn:not(:last-child):before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    margin: auto;
    top: 0;
    bottom: 0;
    z-index: 1000;
  }
  
  .input-group .input-group-addon:last-child:before,
  .input-group .input-group-btn:last-child:before {
    border-right-color: red;
    right: 0;
  }
  
  .input-group .input-group-addon:not(:last-child):before,
  .input-group .input-group-btn:not(:last-child):before {
    border-left-color: red;
    left: 0;
  }
  </code></pre>
  
  <p><strong>EDIT :</strong> Based on an answer, I modified the styles which now work fine in all but IE10 and below. IE offsets left-aligned <code>input-group</code> carets by <code>4px</code> as can be seen here <a href="http://jsfiddle.net/W8mFS/3/" rel="nofollow">http://jsfiddle.net/W8mFS/3/</a>. Any ideas how to fix this up?</p>
  
  <p>The updated CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.input-group.input-group-caret span:after,
  .input-group.input-group-caret &gt; input + span:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 10px solid transparent;
  }
  
  .input-group.input-group-caret &gt; input + span:before {
    border-right-color: #cccccc;
    margin-left: -20px;
  }
  
  .input-group.input-group-caret &gt; input + span:empty:before {
    margin-left: -44px;
  }
  
  .input-group.input-group-caret &gt; input + span:after {
    border-left-color: transparent;
  }
  
  .input-group.input-group-caret span:after {
    border-left-color: #cccccc;
  }
  
  .input-group.input-group-caret .input-group-addon {
    padding: 0;
  }
  
  .input-group.input-group-caret .input-group-addon i {
    font-style: normal;
    margin-left: 12px;
    padding-right: 12px;
  }
  
  .input-group.input-group-caret .input-group-addon:empty {
    padding-left: 24px;
  }
  </code></pre>
  
  <p><strong>UPDATE :</strong> With added <code>input-group</code> sizing JSFiddle here: <a href="http://jsfiddle.net/W8mFS/4/" rel="nofollow">http://jsfiddle.net/W8mFS/4/</a>.</p>
  
  <p>The LESS code shows the use of Bootstrap variables to control caret size, margins and padding:</p>
  
  <pre><code>@import "path_to_bootstrap/less/mixins";
  @import "path_to_bootstrap/less/variables";
  
  // input-group caret size
  @caret-size-base:  ceil(@font-size-base * 0.70);  // ~10px;
  @caret-size-large: ceil(@caret-size-base * 1.20); // ~12px;
  @caret-size-small: ceil(@caret-size-base * 0.80); // ~8px;
  
  // input-group caret
  .input-group.input-group-caret {
    span:after,
    &gt; input + span:before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
  
      // v-align to middle
      top: 0;
      bottom: 0;
      margin: auto;
  
      border: @caret-size-base solid transparent;
    }
  
    &gt; input + span:before { border-right-color: @input-border; margin-left: -( 2 * @caret-size-base ); }                  // right aligned
    &gt; input + span:empty:before { margin-left: -(( 2 * @padding-base-horizontal ) + ( 2 * @caret-size-base )); }          // right aligned
    &gt; input + span:after  { border-left-color: transparent; }                                                             // right aligned
    span:after  { border-left-color: @input-border; }                                                                     // left aligned
  
    // sizing
    &amp;.input-group-sm {
      span:after,
      &gt; input + span:before {
        border: @caret-size-small solid transparent;
      }
  
      &gt; input + span:before { border-right-color: @input-border; margin-left: -( 2 * @caret-size-small ); }               // right aligned
      &gt; input + span:empty:before { margin-left: -(( 2 * @padding-base-horizontal ) + ( 2 * @caret-size-small )); }       // right aligned
      &gt; input + span:after  { border-left-color: transparent; }                                                           // right aligned
      span:after  { border-left-color: @input-border; }                                                                   // left aligned
    }
  
    &amp;.input-group-lg {
      span:after,
      &gt; input + span:before {
        border: @caret-size-large solid transparent;
      }
  
      &gt; input + span:before { border-right-color: @input-border; margin-left: -( 2 * @caret-size-large ); }               // right aligned
      &gt; input + span:empty:before { margin-left: -(( 2 * @padding-base-horizontal ) + ( 2 * @caret-size-large )); }       // right aligned
      &gt; input + span:after  { border-left-color: transparent; }                                                           // right aligned
      span:after  { border-left-color: @input-border; }                                                                   // left aligned
    }
  
    // input-group caret alignment fixes
    .input-group-addon {
      padding: 0;
  
      i {
        font-style: normal;
        margin-left: @padding-base-horizontal;
        padding-right: @padding-base-horizontal;
      }
  
      // fix-up alignment of empty addon
      &amp;:empty {
        padding-left: 2 * @padding-base-horizontal;
      }
    }
  }
  </code></pre>