Before not working as expected

Question

I'm trying to put pseudo-element ::before with img but it just won't show. ( Is Bootstrap messing with it?)

I did look at other answers and tried to put content = "something" but it still won't show.

I also tried display: block too but it will still stay invisible.

Here's the HTML

<header class = "header container-fluid  navbar navbar-fixed-top navbar-inverse">

<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Anime</a></li>
    <li><a href="#">Manga</a></li>
    <li><a href="#">Games</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li>
          <a data-toggle="modal" data-target="#myModal" >Log-In</a>

        </li>
        <li><a href="#">Sign-Up</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Watch Paralax</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->

<!-- MAIN IMAGE -->
<div class = "container">
<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">
</div>

Here's the CSS

img{
margin-top:70px;
border-radius:10px;
}

img::before{
content:"This is not working";
color:black;
font-size:200px;
}

https://makandracards.com/makandra/8417-you-cannot-use-before-or-after-on-img-in-css — Carol McKay, Jul 07 '16 at 10:58

score 2 · Answer 1 · edited May 23 '17 at 12:33

2

The before and after properties don't work on img elements for most browsers. See here - Does :before not work on img elements?

edited May 23 '17 at 12:33

Community

1
1

answered Jul 07 '16 at 10:52

Gavin Thomas

1,196
6
10

score 0 · Answer 2 · edited May 23 '17 at 12:22

It is the same reason in my answer of other post.

From the specification.

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

Before not working as expected

2 Answers2