How do I apply styles when hovering only the ::first-line of an element?

Question

I want to make the first line of a paragraph bold only when the user hovers over the first line of the paragraph. I tried something like:

p::first-line:hover {
    font-weight: bold;
}

Please note that this question is different from another Stack Overflow question. The referenced question is about how to make the first-line of the paragraph bold when the user hovers over any part of the tag. My question is how to make the first-line bold when user hovers only over the first line.

Answer 1

How you have tried it is correct per the relevant CSS specification:

For example, since the :hover pseudo-class specifies that it can apply to any pseudo-element, ::first-line:hover will match when the first line is hovered.

However, this specific feature combination is not yet implemented in any browsers (e.g. Firefox v123 and Chromium v123). Feel free to test with this Stack Snippet; when it works, you'll know your browser has implemented the feature:

p::first-line:hover {
    color: blue;
}

<p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

In the future, browsers may support this, and this answer can be updated at that time. In the meantime, you'll need to use JavaScript to achieve that functionality.