css - Add :before content to an elements child

Question

I have the following, simplified:

<ul class="menu">
  <li class="button-1">
    <a href="somewhere">Link</a>
  </li>
</ul>

The 'a' is dynamically loaded and I cannot add a class to it. I can only add a class to the 'li'. I want to add an icon before the 'a', so that it is included as part of the clickable link.

Currently I have:

.button-1:before {
    font-family: "FontAwesome";
    content: "f007";
    padding-left: 14px;
}

which sets the icon perfectly above the text link. But it's not clickable. Thus, I tried...

.button-1 a:before

But this doesn't work. Nor any other variation that I can think of or find. I think I am being incredibly stupid here and missing something obvious. Any advice. Thanks

question from:https://stackoverflow.com/questions/65910029/add-before-content-to-an-elements-child

Answer 1

It works (i.e. clickable etc.) when you use the :before on the child, i.e. .button-1 > a:before:

.button-1 > a:before {
    content: "? ";
    
}

<ul class="menu">
  <li class="button-1">
    <a href="somewhere">Link</a>
  </li>
</ul>