First letter not working if -webkit-box display property is set - css

Question

I want to display the first letter in red color but I've noticed when I using display: -webkit-box the first-letter property may not works anymore.
Expected behavior :
Apply style to first-letter (in CSS only) and keep the display property which is used to active -webkit-line-clamp property (or find a CSS alternative to display the only two first lines as now without use the line-clamp and display properties which will permit to do works the first-letter property).
h2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 75px;
border: 1px solid lightgray;
}
h2::first-letter {
color: red;
}
<h2>This is a pretty simple test</h2>

Answer 1

To be accurate, ::first-letter only works for:
display: block;
display: inline-block;
display: flow-root;
So if you want a result that fit you, you should use js Color JS based on this subject
DEMO:
(function() {
// Let's get all user names, you might have another structure
var users = document.querySelectorAll('h2');
// Create the span containing the highlighted asterisk
var asterisk = document.createElement('span');
asterisk.className = 'highlight';
// Walk the users (teehee) and check if the first characer is an asterisk
for (var i = 0; i < users.length; ++i) {
var user = users[i];
var text = user.textContent;
var firstLetter = text[0];
asterisk.appendChild(document.createTextNode(firstLetter));
user.removeChild(user.firstChild);
user.appendChild(asterisk);
user.appendChild(document.createTextNode(text.slice(1)));
}
})();
h2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 75px;
border: 1px solid lightgray;
}
/*h2::first-letter {
color: red;
}*/
.highlight {
color: #f00;
}
<h2>This is a pretty simple test</h2>