I'm attempting to add a ::before pseudo selector to an i element styled with fontawesome. However, when I target the icon through its parent, the ::before css overlaps with the Icon (or makes the icon disappear).
This issue arises only if there is a class selector within its path: .foo a i::before {}; doesn't work;
a i::before {} works as expected.
Non-working CSS:
.foo i {
position: relative;
color: red;
font-size: 1em;
z-index: 5;
}
.foo i::before {
content: '';
position: absolute;
height: 2em;
aspect-ratio: 1 / 1;
background-color: blue;
z-index: -5;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<a href="" class="foo">
<i class="fa-solid fa-chevron-right"></i>
</a>Even adjusting the z-index does not resolve the issue.
The solution seems to be targeting the i element directly for it to work correctly.
Here's a functional example of the desired outcome:
i {
position: relative;
color: red;
font-size: 1em;
z-index: 5;
}
i::before {
content: '';
position: absolute;
height: 2em;
aspect-ratio: 1 / 1;
background-color: blue;
z-index: -5;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<a href="" class="foo">
<i class="fa-solid fa-chevron-right"></i>
</a>