Hover 对属性的影响

Question

I am trying to figure out how to make a 10px halo over the -slider-thumb attribute of my range input slider. I am using React, CSS and HTML and have found this difficult to do because of the overflow:hidden property. This property must stay, as basically none of the code works without it(This was part of a solution to editing the slider base css). I have tried using::after and::before with no avail. So I'm wondering what I'm doing wrong, or if this is even possible as I haven't found any documentation on it. Code and Codepen provided below. Thanks for any help/advice!

HTML:

<div id="root"></div>

CSS:

input[type='range'] {
  -webkit-appearance: none;
  background-color: #ddd;
  height: 10px;
  overflow: hidden;
  width: 300px;
  border-radius: 5px;
  outline: none;
}

input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 10px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  --slider-thumb-background-color: #000;
  background: var(--slider-thumb-background-color);
  border-radius: 50%;
  --box-shadow-color: orange;
  box-shadow: -205px 0 0 200px var(--box-shadow-color);
  cursor: pointer;
  height: 10px;
  width: 10px;
  --border-color: orange;
  border: 3px solid var(--border-color);
}

input[type='range']::-webkit-slider-thumb:hover::after {
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 5px;
  color: yellow;
}

input[type='range']::-webkit-slider-thumb:hover {
  --slider-thumb-background-color: grey;
  --box-shadow-color: red;
  --border-color: red;
}

input[type='range']::-webkit-slider-thumb:active {
  --slider-thumb-background-color: white;
  --box-shadow-color: blue;
  --border-color: blue;
}

input[type='range']::-webkit-slider-thumb:focus {
  --slider-thumb-background-color: white;
  --box-shadow-color: yellow;
  --border-color: yellow;
}

input[type='range']::-webkit-slider-thumb:hover:after {
  border: 10px solid rgb(111, 111, 0.4);
  overflow: auto;
  postion: fixed;
}

input[type='range']::-moz-range-thumb {
  background: #333;
  border-radius: 50%;
  box-shadow: -1005px 0 0 1000px red;
  cursor: pointer;
  height: 10px;
  width: 10px;
  border: 0;
}

JS(Babel)

class VolumeSlider extends React.Component {
  
  constructor() {
    super();
    this.state = {
      value: 120.5
    };
  }

  onUpdate(e) {
    this.setState({
      value: e.target.value
    });
  }  

  render() {
    return (
      <div>
      
      <div className="mb1">
        <input
          className="c-input--range"
          list="tickmarks"
          max={1200}
          onChange={(e) => this.onUpdate(e)}
          step={0.1}
          type="range"
          value={this.state.value}
        />
        <div>
           <label className="c-label">{this.state.value}c</label>
        </div>
      </div>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <VolumeSlider />
  </div>,
  document.getElementById("root")
);

https://codepen.io/kcandle/pen/KKMrZKo

Answer 1

Look at this pen hope this is what you're looking for, explanation: i've added the after with position absolute made the input relative position made the after 1px X 1px, made inset then translated X axis from 0 to whatever value i want.

    input[type='range']::after{
    content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  visibility: hidden;
   width: 1px;
    height: 1px;
  box-shadow: 0 0 10px 5px #fff, inset 0 0 10px 5px #fff;
}
input[type='range']:hover::after{
    visibility: visible;
  animation: wave 2s forwards;
}@keyframes wave {
  0% {
   
    transform:translateX(0);
  }
  100% {
    transform:translateX(500px);
  }
}

https://codepen.io/headsick/pen/xxOMXqw