div全体をリンクにした場合にテキストに下線をつけたい

Question

div全体をリンクにした場合にテキストに下線をつけたい

div全体をリンクとした場合に、div内のテキストに下線を付けたいです。

ソースコード

<div class="filed">
<a href="リンク"></a>
<img src="画像">
<p class="text_A">文字A</p>
<p class="text_B">ここの文字にhoverで下線を表示させたい。</p>
</div>

.filed{
  width:100%;
  display:flex;
  position:relative;
}
.filed a{
  position:absolute;
  top:0;
  left: 0;
  height:100%;
  width:100%;
  display:block;
}
.filed a:hover{
  color:#FFFFFF;
  opacity:0.4;
  background-color:#FFFFFF;
}

試したこと

a:hover に　text-decoration:underline; としましたが変わりませんでした。
.text_B:hover に　text-decoration:underline; としましたが変わりませんでした。

実現は不可能なのでしょうか？

Answer 1

divがaの中にありません

Comments

[aoiharu]

ありがとうございます。
aタグの中にdivは入れてはダメだと思っていました。
html5では問題ないということがわかりました。