Defining text selection highlight with CSS

Question

I'm having problems designing a CSS for a website I'm making. It's similar to the one shown in this pic:
.

How can I make it so that when a user selects and blocks the text, the areas on its right and left don't get selected as well? In my case, I've tried wrapping the tag-containing text (and <article> tag) inside a <div> but I don't see any change.

Answer 1

I know this is pretty old, but I thought I'd chime in just in case my solution might help anyone the future.

I had the same issue occurring where the text selection was including the padding within a div element. I tried @Joseph Marikle's solution; however, I had other elements being floated that were problematic with the float solution and using absolute positioning was not an option.

I then tried looking for ways to remove the elements (p elements in my case) from the page flow. I landed on this SO question and decided to try relative positioning on my p elements and it seemed to produce the desired effect.

Here is a CodePen demonstrating the results. The second p element has relative positioning applied to it and the text selection is constrained.