a:hover 時にテキストが表示されません。
コード初心者です。
コピペしたものを若干数字を変えて使用しようとしましたが、テキストが表示されません。他の解説をみましたが、自分との違いがよく分からないため質問させていただきました。
以下htmlとcssを記載しますので、どなたかご教授いただけないでしょうか・・・・。
html
<a href="#" class="button">
<section id="news">
<h2>お知らせ</h2>
<p>
9月10日㈭ 遊びに来てね！！
</p>
</section>
</a>
css
#news{
width: 100%;
height: 180px;
margin: 0px auto 50px;
border-radius: 10px;
background-color: rgb(204, 160, 160);
}
.button{
position: relative;
display: block;
width: 90%;
margin: 0 auto;
transition: .3s;
color: rgb(41, 35, 35);
}
.button:hover{
color: aliceblue;
}
.button::before {
position: absolute;
width: 100%;
height: 180px;
border-radius: 10px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: '';
background: rgb(37, 59, 26);
transform-origin: right top;
transform: scale(0, 1);
transition: transform .2s;
}
.button:hover::before {
transform-origin: left top;
transform: scale(1, 1);
color: ghostwhite;
}
宜しくお願い致します！！！！
お礼
無事半透明にならなくなりました 有難う御座います！！