Adding a word to numbered list using CSS inline - css

Question

I am trying to add a word to my numbered list. I want to put the word 'STEP ' before the number. I have seen many answers on how to add it in using CSS and counters (like this: How can I prefix ordered list item numbers with a static string using CSS?), but my list is in a generated email. Is there a way to do it inline?
This is my code:
public function createForgotPasswordEmail($transcriberEmail, $newpassword) {
$attachments = $this->setForgotPasswordAttachmentImages();
$htmlBody = '<h2>Seven steps to reset your password</h2>';
$htmlBody .= '<span style="background-color: yellow;font-weight: bold;">Please follow the 7 steps below carefully to reset your password.</span><br>';
$htmlBody .= '<br>This is a <u>one-time use</u> password. If not used within 72 hours, it will expire and you will need to request another temporary password.<br><br>';
$htmlBody .= '<ol><li><strong>Log out of the template manager</strong> (right click on the template manager in the task bar and choose Exit from the menu).</li><br />';
$htmlBody .= '<img src="cid:exit_from_template_manager.png" width="325" height="149"><br /><br />';
$htmlBody .= '<li>Copy the password below (highlighted in yellow) and use it to sign in to your account on ###.';
$htmlBody .= '<ul><li style="list-style-type: none;padding-top:5px;padding-bottom:5px;">Password: <span style="background-color: yellow;">' . $newpassword . '</span>';
$htmlBody .= '</li></ul></li>';
$htmlBody .= '<br /><img src="cid:log_in_to_###.jpg" width="185" height="175"><br /><br />';
$htmlBody .= '<li>Once you log in, you will be prompted to change your password. ';
$htmlBody .= 'A message will appear in red at the top left of the ### page if your password was changed successfully.</li>';
$htmlBody .= '<br /><img src= "cid:password_successfully_changed_message.png" width="190" height="309"><br /><br />';
$htmlBody .= '<li>You will now be automatically logged out. Please log in again using your new password.</li>';
$htmlBody .= '<li>Update your password manager with your new password, if you use one.</li>';
$htmlBody .= '<li>Log in to the template manager using your new password.</li>';
$htmlBody .= '<br /><img src="cid:login_to_template_manager.png" width="361" height="298"><br /><br />';
$htmlBody .= '<li>If you use a separate password manager for the template manager, update your password there too.</li></ol>';
$htmlBody .= '<br><br>Thank you,<br>###';
$data = [
'From' => '###',
'To' => $transcriberEmail,
'Subject' => 'Your temporary ### password',
'Tag' => 'temporaryPasswordSent',
'HtmlBody' => $htmlBody,
'Attachments' => $attachments
];
$emailClient = new emailClient();
return $emailClient->sendEmailWithInlineAttachments($data);
}
Just to be clear, I want to output:
STEP 1. Log out of the...
STEP 2. Copy the...