Hover in CSS, questions about Li and a tag

<style>
UL Li a:hover{
  background-color:red;
}
</style>
<ul>
<li><a> text </a></li>
</ul>

This will only turn red when the text hovers, but I want the front dot to turn red, is there a way?
The background of the actual work is a picture to move the background picture to the left or the whole Li is in the background.
But hover is only valid for a, if a <a> is wrapped outside Li, it seems that the background image has the text in white and the whole Li moves to the right.
Don't want to use the script, is there a way?

ul li{list-style:none; (Cancel the Li tag default style, which is the small dot that comes in front of you, you need to be far away to add "·" directly to the front of the text. Symbols can be)} ul Li a:hover{  </style>
Hover in CSS, questions about Li and a tag