CSS Hover only on text?

Question

If I have the following HTML with a custom CSS class:

.custom_list_item {
  color: black;
}

.custom_list_item:hover {
  color: red;
}

<div class="custom_list_item">Test</div>

This makes it so when I hover over the entire box, it makes the text red. Is there a way to make sure this only happens when I hover over just the text itself?

Answer 1

Wrap it in a span. A p would stretch over the full width of div.

.custom_list_item {
    color: black;
}

.custom_list_item span:hover{
    color: red;
}

<div class="custom_list_item"><span>Test</span></div>