Search code examples
csscss-selectorshoverpseudo-elementpseudo-class

Is there a way to apply styles to CSS ::first-line pseudo-class on hover of the element


I've been tinkering with some CSS for an HTML markup. The problem I am facing is that there is a style already applied using CSS ::first-line pseudo-class. What I want is to change the style of this first line on hover state. Is there a way to apply something like p::first-line:hover?


Solution

  • You have to define the p::first-line before you can define the chain p::first-line:hover like so:

    p::first-line { color: black; }  
    p:hover::first-line { color: red; }
    

    JSFiddle demo