Search code examples
javascripthtmlcssselectionopacity

Including text with padding in the selection block

I have text with padding and opacity, but when the user selects it, it appears with spaces and a different selection color. .main and .start are necessary for my code. How do I fix this?

  .main {
    padding: 0px 5px;
  }
  .start {
    opacity: 0.5;
  }
    <span class="main">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    </span>
    <span class="start">13941</span>
    <span class="main">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </span>

enter image description here

Solution

  • I added a blank space in each .paragraph using JS, and set the opacity to color #C1C1C1.