@uot (uo yu)posted at 2021-08-25

text-decoration: none;が反映されない

Q&A

解決したいこと

CSSの、text-decoration: none;を指定箇所に反映させたいです。
少しrailsの要素もはいるかもしれません。

該当するソースコード

下記のタイトルに反映させたい。

<thead>
  <tr>
    <th scope="col"><%= sort_order "name", "タイトル" %></th>
    <th scope="col"><%= sort_order "price", "金額" %></th>
    <th scope="col"><%= sort_order "created_at", "追加日" %></th>
  </tr>
</thead>

sort_orderはヘルパーメゾットを使用しています。

module ContentsHelper
  def sort_order(column, title)
    direction = (column == sort_column && sort_direction == 'asc') ? 'desc' : 'asc'
    link_to title, { sort: column, direction: direction }
  end
end

検証ツールを確認するとこちらが反映されています。

element.style {
}

user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

html {
    color: #000;
    background: #FFF;
}

自分で試したこと

thead、tr、thに全てclassを指定して、text-decoration: none;をつけたが反映されない。
divで囲んでclassを指定したが、うち消されてしまい、a:-webkit-any-linkが適用されてしまいます

2Answer

@_y_s posted at 2021-08-25

text-decoration: underlineが<a>に付いているので、取り消すには<a>にtext-decoration: noneを指定する必要があります。

例1（親要素にclassを付ける例）

<style>
.sortable a {
  text-decoration: none;
}
</style>
<!-- 略 -->
<thead class="sortable">
  <tr>
    <th scope="col"><%= sort_order "name", "タイトル" %></th>
    <th scope="col"><%= sort_order "price", "金額" %></th>
    <th scope="col"><%= sort_order "created_at", "追加日" %></th>
  </tr>
</thead>

例2（aに直接classを付ける例）

module ContentsHelper
  def sort_order(column, title)
    direction = (column == sort_column && sort_direction == 'asc') ? 'desc' : 'asc'
    link_to title, { sort: column, direction: direction }, class: 'sorter'
  end
end

a.sorter {
  text-decoration: none;
}

1Like

@uot posted at 2021-08-26

無事解決できました！
とてもわかり易い回答で助かりました！

0Like

Are you sure you want to delete the question?