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

Yes, with gradients it work's fine.

<h1 class="grad">Design the Future Kitchen</h1>

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;
}

Thank you for ruining at least an hour of my day, but I actually found a CSS-only solution. It's not really solid though, and it involves a lot of faking, but hey: No JavaScript!

We basically use a data-content attribute with the same content as the span holds, and then copy this to a layered :after element which displays it. We then hide the original text and apply a 50% height to the after element, this way the background color can only be applied to the bottom half.

h1 {
    position: relative;
    color: #FFF;
}

h1:after {
    content: attr(data-content);
    position: absolute;
    color: #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #FFF;
}

h1::selection {
    background: #fcf113;
}
<h1 data-content="Hello world!">Hello world!</span>

Based on above, user @chrona made this really lovely working version:

var paragraph = $('p');
var words     = paragraph.text().split(" ");

paragraph.empty();

$.each(words, function(i, v) {
    paragraph.append('<span data-word="' + v + '"> ' + v + ' </span>');
});
p {
  background: white;
}

body {
  background: white;
}

span {
  position: relative;
  font-size: 1.25rem;
  line-height: 1.4;
}

span::after {
  background: white;
  content: attr(data-word);
  display: block;
  height: 75%;
  left: 0;
  padding-top: 0.14em;
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  top: -0.28em;
  width: 100%;
}

span::selection {
  background: #fcf113;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

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 <span> 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

Tags:

Html

Css

Recent Posts