下記のように、擬似要素:afterでboxを.button-5の真下に表示したいと考えております。
しかしながら、以下のコードでは表示されず、またDevelopertoolで見ると非表示ながらもその位置は
真下ではなく右にずれています。
これらの原因と、真下に表示させる方法について、アドバイスいただけますでしょうか?
よろしくお願い申し上げます。
html
1<div class="button-5"> 2 <div class="eff-5"></div> 3 <a href="#">AAA</a> 4</div>
css
1.button-5{ 2 background:#6ce890;; 3 font-family: "Raleway", Helvetica, sans-serif; 4 font-size: 0.8em; 5 width:115px; 6 /* height:50px; */ 7 /* border:2px solid #34495e; */ 8 float:left; 9 text-align:center; 10 cursor:pointer; 11 position:relative; 12 box-sizing:border-box; 13 overflow:hidden; 14 margin-left: auto; 15 /* margin:0 0 40px 0; */ 16} 17.button-5 a{ 18 /* font-family:arial; 19 font-size:16px; */ 20 color:#34495e; 21 text-decoration:none; 22 border-bottom: none!important; 23 line-height:50px; 24 transition:all .5s ease; 25 z-index:2; 26 position:relative; 27} 28.eff-5{ 29 width:140px; 30 height:60px; 31 left:-140px; 32 top:-50px; 33 background:#c7c7c778; 34 position:absolute; 35 transition:all .5s ease; 36 z-index:1; 37} 38.button-5:hover .eff-5{ 39 left:0;top:0; 40} 41 42.button-5:after{ 43position:absolute; 44content: ""; 45top:55px; 46width:100px; 47height:100px; 48background:#c7c7c778; 49transition:all .5s ease; 50z-index:1; 51}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/26 01:34
2019/04/26 01:35
2019/04/26 01:43
2019/04/26 02:05