2016-07-07 11 views
0

私は擬似要素::beforeimgと入れようとしていますが、表示されません。 (ブートストラップにそれがついていませんか?)期待通りに動作しない前に

私は他の答えを見て、content = "something"を入れようとしましたが、まだ表示されません。

私もdisplay: blockを試しましたが、それでも見えません。

は、ここで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> 

はここbeforeafter性質はほとんどのブラウザのためにimg要素では動作しませんCSS

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

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

https://makandracards.com/makandra/8417-you-cannot-use-before-or-after-on-img-in-css –

答えて

0

他の投稿の私のanswerの同じ理由です。

specificationより。

作成者は:beforeおよび:after擬似要素で生成されたコンテンツのスタイルと位置を指定します。その名前が示すように、:beforeおよび:after擬似要素は、要素の文書ツリーの内容の前後の内容の位置を指定します。 'content'プロパティは、これらの擬似要素と共に、挿入されるものを指定します。

関連する問題