CODEWITHSUNDEEP
cssruby-on-railsruby
chiccaboom
chiccaboom

Reputation: 317

How can add an underline using ruby on rails and css?

I'm working with ruby on rails and I"m not very familiar with the language. What I want to do is fairly straight forward. I have a language toggle bar which allows the user to choose the language with which they can view the site.

I want to underline the selected language when it is chosen. But I'm not sure how to add a class or a span so that I can just underline (bottom-border) one of the languages.

Here is my code:

<div class="language">
        <% if @language == :fr %>
            <%= link_to 'English', language_path(language: :en)  %>
            <span>|</span>
          French
      <% else %>
        English |
        <%= link_to 'French', language_path(language: :fr)  %>
      <% end %>
</div>

Can someone please help me? When I select the class 'Language' it underlines both the "English|French" entirely, when all I really want is to underline the language that is currently selected. So either or, not both.

Upvotes: 1

Views: 2127

Answers (1)

pgblu
pgblu

Reputation: 702

Put the active language into its own span and style it there

<div class="language">
    <% if @language == :fr %>
      <%= link_to 'English', language_path(language: :en)  %>
      <span>|</span>
      <span class="selected">French</span>
    <% else %>
      <span class="selected">English</span>
      <span>|</span>
      <%= link_to 'French', language_path(language: :fr)  %>
    <% end %>
</div>

CSS:

.language > .selected {
  text-decoration: underline;
}

You might also need to style your generated anchor tags to have text-decoration: none;, since they are probably underlined by default (as is good practice anyhow). In any case, don't use border-bottom for this.

Having said all that, I think you need to make it as clear as possible that the currently unselected language is an anchor tag. When people see underline, they tend to assume the underlined thing is a link. Conversely, things with no underline that ARE links constitute surprising behavior.

Upvotes: 5

Related Questions