Home > Mobile >  How to remove styling inherited from anchor tag
How to remove styling inherited from anchor tag

Time:11-02

I have seen this question asked before, but none of the solutions seem to work for me or are using an "href", not a "link_to" in Rails, like I am.

I am trying to make my entire card clickable, I have done this by wrapping the contents in a "link_to". The problem is that all the text in the card is appearing as links by inheriting the "a" element's properties.

Thanks!

`

  <div >
    <% @challenges.each do |challenge|%>
      <%= link_to(challenge_path(challenge), class: "test") do %>
      <div >
          <img src= "<%= challenge.poster_url %>", alt="Challenge poster">
        <div >
          <div>
              <h2> <%= challenge.title %> </h2>
              <p> <%= challenge.description %> </p>
          </div>
          <div >
            <%= challenge.category %>
          </div>
        </div>
      </div>
      <% end %>
    <% end %>
  </div>

`

I have tried turning setting text-decoration to "none" on the h2 and p elements, turning off inheritance, and setting a tags to inherit all properties of parent to avoid it passing on its own attributes. But none of this has worked, any suggestions are appreciated!

CodePudding user response:

You have to set the styling to "none" on the anchor tag. Here is an example;

.parent {
  padding: 20px;
  background: #efefef;
  /* unset <a> styling */
  text-decoration: unset;
  color: inherit;
}
<a href="#" >
    <span>Text in anchor tag</span>
</a>

<a href="#">
    <span>Default Text in anchor tag</span>
</a>

In your case;

.test {
  /* ... your other style */
  text-decoration: unset;
  color: inherit;
}


  • Related