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

Yes, with gradients it work's fine.

Design the Future Kitchen

Here's the css code.

.grad {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,0,1) 50%, rgba(255,255,0,1) 100%);
}

h1 must be an inline-element or do it with a span-tag.

h1 { 
  display: inline;
}