How to achieve this 'behind text' effect in CSS?

Question

How can I achieve this 'behind text' color effect with CSS?

Answer 1

These are the rough implementation of all the examples, and you can adjust it according to your need.

 h1 span { color: #FD1215; background: #FFE0E0; padding: 5px 10px; border-radius: 4px; font-size: 25px; } h2 { color: #10284A; margin-top: 40px; font-size: 25px; } h2 span { background: #FC6E6B; padding: 5px 18px 5px 8px; clip-path: polygon(3% 0, 100% 0%, 90% 100%, 0% 100%); border-radius: 2px; font-size: 25px; } h3 { color: #353535; margin-top: 40px; position: relative; font-size: 25px; z-index: 1; } h3 span { width: 100px; height: 10px; background: #FCC183; position: absolute; bottom: 0px; left: 0px; z-index: -1; }

 <h1>Reach your own <span>goals</span></h1> <h2>Accessbility <span>for everyone</span></h2> <h3>The Benefits <span></span></h3>

Answer 2

 <style> h1 { padding: 30px 0 8px; position: relative; } h1::before { content: ""; position: absolute; left: 7%; bottom: 16px; width: 150px; height: 14px; transform: skew(-12deg) translateX(-50%); background: rgba(238,111,87,0.5); z-index: -1; } </style> <h1>Sahan</h1>

Try to learn about CSS ::bofre and ::after pseudo element, and skew , transform keywords, maybe background also will be helpful to you!