Highlight text on selection in css

Create an awesome effect on selecting text using css.

First we need to create a para with some text.

<p class="highlight-text">Select the text to see magic . </p>

Now let’s add aΒ ::selection pseudo selector on an element to style text within it when selected.

.highlight-text ::selection {

background : #738BFA;
   color : white;
 }

To make the style to the entire document you can declare like

::selection { // this is set to the document

background : #738BFA;
   color : white;
}

Follow Javascript JeepπŸš™ for more interesting things. πŸ₯Ά.

Leave a comment

Design a site like this with WordPress.com
Get started