[Rails]link_toメソッドでテキストを含む周辺領域全体をリンクにしたい

###編集前コード
登録した英単語一覧を見れる単語帳のようなものを作成中です。
以下のコードだと下の画像のように綺麗に表示されているのですが,テキストの周辺のみがリンクになっていて、使い勝手が悪いのでその周辺のdiv領域をリンクにしようと試みました(単語の周辺にある灰色の領域です)

htmlSlim
1.row
2   - @vocabs.each do |vocab|
3     .vocab-word.col-3.text-center.text-nowrap.font-weight-bold.font-italic
4       =link_to vocab.word, vocab_path(vocab)

css
1.vocab-word{
2  background: #eee;
3}
4
5.vocab-word:before{
6  content: "";
7  display: block;
8  padding-top: 30%;
9}
10.vocab-word:after{
11  content: "";
12  display: block;
13  padding-top: 30%;
14}

###編集後コード
link_toメソッドでdoを使用すれば全体をリンクに出来ると書いてあったので、以下のようにコードを書きましたが、下の画像にあるようにレイアウトが崩れてしまいます。
link_toでaタグを作ったことによりインライン要素となってレイアウトが崩れてしまったのではと考えているのですが、どのようにすれば周辺全体をうまくリンク化することが出来るのでしょうか？

htmlSlim
1.row
2  - @vocabs.each do |vocab|
3    =link_to vocab_path(vocab) do
4      .vocab-word.col-3.text-center.text-nowrap.font-weight-bold.font-italic
5          = vocab.word

なお生成されるHTMLは以下の通りです

行動規範の内容に同意します

回答2件

ベストアンサー

slim
1.row
2  - @vocabs.each do |vocab|
3    .col-3
4      = link_to vocab_path(vocab) do
5        .vocab-word.text-center.text-nowrap.font-weight-bold.font-italic
6          = vocab.word

投稿2020/03/16 01:01