Add :before content to an elements child - css

Question

I have the following, simplified:
<ul class="menu">
<li class="button-1">
Link
</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

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">
Link
</li>
</ul>
(As you can see, I used some other content to work around the non-available FontAwesome Icon)
ADDITION AFER COMMENTS:
You can also use :afer insteadof before. In this case you need some more settings, also for the parent, especially a relative/absolute position pairing as shown below:
.button-1 {
position: relative;
padding-left: 20px;
}
.button-1>a:after {
content: "©";
position: absolute;
left: 0px;
}
<ul class="menu">
<li class="button-1">
Link
</li>
</ul>