Improve your brand startegy using ::Selection pseudo-element

Hey Gang, Feel lucky to see you again in my post. I'm sure while reading the title, your thought's be like how a single pseudo element improve my brand🤔🤔!?. But, The answer is YES.

This pseudo element will do a small job for your project or for your client project. However, That small thing build an impression with your end-user or your client. Uh, Can't wait and get this show on the road🎉.

Then what's the job of ::selection?

The CSS pseudo-element ::selection changes the styling that is highlighted by the user (means allows you to style how selected text looks), such as when you highlight the text using a mouse or another pointing device.

::-moz-selection{
  background: #E04550;
  color: white;
}
::selection {
  background: #E04550;
  color: white;
}

Seems tiny piece syntax and outcome may be beyond the belief😍.

Note: convert default color to brand color, while user hightlight the text in your webpage.

Hey still travel with me, Then it's my pleasure to show you the codepen demo. Start to play in codepen for more understanding.

Cheers, You reached the climax of this subtle blog. I close my window with bonus info. only a subset of CSS properties are allowed:

• color
• background-color but not background-image
• text properties.

Be consious with above points, while using ::selection pseudo element

Browser Support

::selection pseudo element did fine job in most of the browser(except Opera mini and safari on ios).

It's really a subtle work for maintain the brand and I am sure which definitely impress your client. If you loved this subtle blog, Then give a endearing heart💝 which really lot to me. I love the discussion with you, If you feel not good at styling concept or any doubts.

Thanks for Reading!!
Preethi
- Make your CSS life easier