Override Text Underline inside a Rails link_to

Question

I have the following structure:

        <div class="col">
            <%= link_to page_path("donate") do %>
                <div class="sticky-note">
                    <h3>Donate</h3>
                    <p>Give dollars or products.</p>
                </div> <!-- sticky note -->
            <% end %>
        </div> <!-- col -->

Rendered, it looks like this:

        <div class="col">
            <a href="/donate">
                <div class="sticky-note">
                    <h3>Donate</h3>
                    <p>Give dollars or products.</p>
                </div> <!-- sticky note -->
            </a>
        </div> <!-- col -->

I'm trying to get rid of the text underline for "Donate" and "Give dollars or products", but no matter what I try it doesn't go away.

Right now I have this CSS:

a:hover .sticky-note *,
a:visited .sticky-note *,
a:link .sticky-note *,
a:active .sticky-note * {
  text-decoration: none !important;
}

Which seems correct to my eye, but nothing works. Even if I go in code inspector or put it in manually as a "style='text-decoration: none'" with inline HTML (which I know is a no-no) it doesn't go away.

Can anyone help me troubleshoot this?

score 1 · Accepted Answer · answered Oct 11 '21 at 23:28

This isn't really possible. You can't override text-decoration on block-level children of a link. If you know what color the background will be, you can set the text-decoration-color to that color to hide it. So you would have something like this:

a .sticky-note * {
  text-decoration: underline;
  text-decoration-color: white;
}

<div class="col">
  <a href="#">
    <div class="sticky-note">
      <h3>Donate</h3>
      <p>Give dollars or products.</p>
    </div>
    <!-- sticky note -->
  </a>
</div>
<!-- col -->

See the comments on this answer for more info.

Override Text Underline inside a Rails link_to

1 Answers1