mPDF CSS class for text color of <i> nested in <li> overridden by parent's color - mpdf

Question

relevant HTML looks like:
<li class="lineEntry t1" title="Right-Click for Options" style="">
<span id="job_111095">
<i class="ic-p-appr"></i> 111095
</span> Foo/Bar, Some Text </span>
</li>
... and the relevant CSS looks like ( file = icomoon's foo.css ) ...
/* this is an icomoon icon, that should be green */
.ic-p-appr:before {
content: "\e905";
color: #0f8040 !important;
}
... and ( file = bar.css ) ...
.t1{color:#B92426;}
/* .line-entry never defines a color */
I have added !important AND loaded the foo.css After the bar.css in an effort to make the icon green (#0f8040), but the icon nested within the .t1 class always inherits that parent's font color ONLY when mpfd converts the HTML to a pdf doc. (the nested icon in HTML works as expect)
When I look at the mPDF documentation for supported CSS, I see nothing there or in SO that suggests why this occurs. My mPDF is 7, and here is the configuration:
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [
'../vendor/resources/fonts',
]),
'fontdata' => $fontData + [
'icomoon' => [
'R' => 'icomoon.ttf',
],
],
'format' => 'A4-L',
'orientation' => 'L',
'debug' => true,
]);
see:
enter image description here
Help with this issue is appreciated.

Answer 1

Fixed: I discovered that because mPDF ver7 does not support CSS pseudo class :before, it was necessary to declare the font-color independently with the class name. So for my HTML output, this worked, .ic-p-appr:before { color: #0f8040 !important; } but I had to declare it again, minus the ':before' to register that style in the PDF document.
Summary: mPDF7 ignores CSS style attributes declared under a pseudo-class.