title: Extra space appears when using :before selector
body: <p>I'm not a CSS specialist. I have a DRUPAL site, using a theme based on bootstrap. I use the bootstrap alert boxes in order to display important messages on the homepage. It works well, except that I get extra space when adding some content in a :before selector. I created a <a href="http://jsfiddle.net/wzLzmjen/1/" rel="nofollow"><strong>fiddle</strong></a></p>
  
  <p>Is there a simple way to solve this extra space? I solved the issue by setting line-height to 0 to the ancestor of the alert, but then when reducing the page, text doesn't go to new line and gets imbricated with itself.
  Thanks for help.</p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#top-content .block .views-row::before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #f37021;
    content: "\e101";
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-size: 2em;
    font-style: normal;
    font-weight: 400;
    left: 0.35em;
    /*line-height: 1;*/
    position: relative;
    top: 0.3em;
  }
  /*#top-content .block .views-row {
   padding-bottom:1.2em;
  }*/
  
  #top-content .block .views-row .views-field {
    margin-left: 3em;
  }
  #top-content .block a {
    color: #f37021;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div id="top-content"&gt;
    &lt;div class="container clearfix"&gt;
      &lt;div class="clearfix" id="top-content-inside"&gt;
        &lt;div class="region region-highlighted"&gt;
          &lt;div class="block block-views contextual-links-region clearfix" id="block-views-alerts-block-1"&gt;
  
            &lt;div class="contextual-links-wrapper contextual-links-processed"&gt;&lt;a href="#" class="contextual-links-trigger"&gt;Configure&lt;/a&gt;
              &lt;ul class="contextual-links"&gt;
                &lt;li class="views-ui-edit first"&gt;&lt;a href="/en/admin/structure/views/view/alerts/edit/block_1?destination=node/385"&gt;Edit view&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="block-configure last"&gt;&lt;a href="/en/admin/structure/block/manage/views/alerts-block_1/configure?destination=node/385"&gt;Configure&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
              &lt;div class="view view-alerts view-id-alerts view-display-id-block_1 view-dom-id-281661d0f4b7c5128ce6ef7abc38dfb1"&gt;
                &lt;div class="view-content"&gt;
                  &lt;div class="views-row views-row-1 views-row-odd views-row-first alert alert-info fade in"&gt;
                    &lt;div class="views-field views-field-nothing"&gt; &lt;span class="field-content"&gt;&lt;a aria-label="close" data-dismiss="alert" class="close" href="#"&gt;×&lt;/a&gt;&lt;/span&gt; 
                    &lt;/div&gt;
                    &lt;div class="views-field views-field-title"&gt; &lt;span class="field-content"&gt;&lt;a href="/nl/content/wiv-isp-closed-between-1st-and-5th-november"&gt;WIV-ISP closed between 1st and 5th of November&lt;/a&gt;&lt;/span&gt; 
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="views-row views-row-2 views-row-even views-row-last alert alert-info fade in"&gt;
                    &lt;div class="views-field views-field-nothing"&gt; &lt;span class="field-content"&gt;&lt;a aria-label="close" data-dismiss="alert" class="close" href="#"&gt;×&lt;/a&gt;&lt;/span&gt; 
                    &lt;/div&gt;
                    &lt;div class="views-field views-field-title"&gt; &lt;span class="field-content"&gt;&lt;a href="/nl/content/treinramp-wetteren"&gt;Treinramp in Wetteren&lt;/a&gt;&lt;/span&gt; 
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>