Overline highlight title h2 with brush effect in css

I am trying to achieve this on all my subtitles h2 in my whole website (in css) :

h2 overlined with irregular border

I want to overline my text with this kind of brush effect. It is important for me that the border is irregular and that I get a textured effect.

The most difficult thing is that I want this background to be under the letters only. What I don’t want is a rectangular background that covers the part where there is no letter. Not that : I don't want a rectangle

Unfortunatly it seems only possible with a text in display:inline;

What’s complicating even more is that I don’t want to decide the last word of each line. The main reason is that I am changing the style at once of hundreds of H2 in my whole site. Changing the html inside each of them would take an eternity and wouldn’t be responsive at all. So changing the html of my h2 like this is not possible :

<h2> <span>Fist line</span> <span>Second line</span> <span>Third line</span> </h2> 

I tried to play with borders clippath and multiple background-image but nothing worked till now.

Is there a genius here who knows the solution ?

Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.