title: CSS pseudo-elements not working with my label elements
body: <p>Trying to style the error output on jquery.validate and I am not getting any success using Pseudo-elements in the css. Anyone ever have any success styling an error box with an arrow on the top with jquery.validate? Can get the box with the with arrow on top using normal CSS but not with jquery.validate?. </p>
  
  <p>Used <a href="http://cssarrowplease.com/" rel="nofollow">http://cssarrowplease.com/</a> to get the CSS (code below). Thanks</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  label.error {
      float: none;
      color: red;
      padding: .8em;
      vertical-align:middle;
      font-size:12px;
      display: inline;
      font-style:normal;
      border: solid 1px #ccc;
      border-radius: 4px;
      background: #f8f8f8;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
  }
  label.error:after, label.error:before {
      bottom: 100%;
      left: 30%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }
  
  label.error:after {
      border-color: rgba(248, 248, 248, 0);
      border-bottom-color: #f8f8f8;
      border-width: 8px;
      margin-left: -8px;
  }
  label.error:before {
      border-color: rgba(204, 204, 204, 0);
      border-bottom-color: #ccc;
      border-width: 9px;
      margin-left: -9px;
  }
  &lt;/style&gt;
  </code></pre>