title: Before not working as expected
body: <p>I'm trying to put pseudo-element <code>::before</code> with <code>img</code> but it just won't show. ( Is Bootstrap messing with it?)</p>
  
  <p>I did look at other answers and tried to put <code>content = "something"</code> but it still won't show.</p>
  
  <p>I also tried <code>display: block</code> too but it will still stay invisible.</p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;header class = "header container-fluid  navbar navbar-fixed-top navbar-inverse"&gt;
  
  &lt;div class="container"&gt;
  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;            
    &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Anime&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Manga&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Games&lt;/a&gt;&lt;/li&gt;
  
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;
            &lt;a data-toggle="modal" data-target="#myModal" &gt;Log-In&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sign-Up&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Watch Paralax&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/header&gt;&lt;!-- end of header--&gt;
  
  &lt;!-- MAIN IMAGE --&gt;
  &lt;div class = "container"&gt;
  &lt;img class = "img-responsive main-pic" src="http://vignette4.wikia.nocookie.net/naruto/images/d/dc/Naruto's_Sage_Mode.png/revision/latest?cb=20150124180545" alt = "naruto"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS</p>
  
  <pre><code>img{
  margin-top:70px;
  border-radius:10px;
  }
  
  img::before{
  content:"This is not working";
  color:black;
  font-size:200px;
  }
  </code></pre>