css - link_to リンクの一部だけで css を変更するにはどうすればよいですか?

Question

がある場合<%= link_to "BlueBottles" %>、たとえば最初の 4 文字を青にするなど、その一部だけの CSS を変更するにはどうすればよいですか?

個別のリンクは正しくないように見えますが、適切な方法が不足しているのではないかと心配しています。助けてくれてありがとう!!

Answer 1

your_pathRails ヘルパーを使用しているので、次のようになります (適切な Rails ルートに置き換えることを忘れないでください)。

<%= link_to content_tag(:b, 'Blue') + 'Bottles', your_path %>

そして、バスティアン・ラングの答えのように、あなたのCSSです：

a > b {
  color: blue;
}

編集: Bastian Rang の提案に従って変更:emされました。:b

Answer 2

次のリンクの場合

<a href="http://www.stackoverflow.com">BlueBottles</a>

あなたはそれをに変更することができます

<a href="http://www.stackoverflow.com"><b>Blue</b>Bottles</a>

a > b {color:blue}CSSでスタイルを設定します

B要素の代わりにem、strongまたはi

Answer 3

のブロックフォームがありlink_toます。これはあなたがそれを使いたい場合だと思います：

<%= link_to your_path do %>
  <span class='special_anchor_part'>Blue</span>Bottles
<% end %>

次にcss：

.special_anchor_part{ color:blue; }