How to apply a background color to only half of the text on selecting?

Question

When I select text, the background color changes to yellow.

body p::selection {
  background: #fcf113;
  color: #000;
  display: none;
}
body p::-moz-selecti         


        

Answer 1

This is not possible with css alone (without hacks), currently you can only style a small set of properties for ::selection like color, background-color, cursor, outline, text-decoration, and text-shadow.

Other background properties will be ignored so using a gradient isn't possible.

---

If you really need the color as described you could use javascript to get the selected text, wrap it with a and style that with CSS.

For small sentences or headlines, check out Roberrrts CSS only answer.

Source:
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
https://drafts.csswg.org/css-pseudo-4/#highlight-styling