Question: Whenever hover, I want to apply a underline style to part of string.

ex)
[![enter image description here](https://i.stack.imgur.com/yvlU0.png)](https://i.stack.imgur.com/yvlU0.png)

Here is a my code.

HTML

```
<a class="test">
  <i>1</i><span>23</span>
</a>

```

CSS

```
.test:hover span{
   border-bottom: 1px solid #999999
 }

```

But, I don't want to use span tag like following code.

ex)

HTML

```
<a class="test"><i>1</i>23</a>

```

CSS

```
.test:hover{
   border-bottom: 1px solid #999999
}
.test:hover i{
  border-bottom: none !important;
}

```

But,It is not working.
How can I solve that?

Answer: 
`.test:hover i {border-bottom: 1px solid transparent;}` does not work because it basically acts as a window through to the line applied to the containing element by `.test:hover {border-bottom: 1px solid #999999;}`.

One way you could get around this issue is to instead set the line to match the background colour so it masks the line made by `.test:hover`. This does presume that the background is a solid colour, if it is a gradient or image this method will not be suitable.

```css
.test:hover {
  border-bottom: 1px solid #999999;
}
.test:hover i {
  border-bottom: 1px solid #FFFFFF;
}
```

```html
<a class="test"><i>1</i>23</a>
```
You would do this. 
Either in your inline style or CSS file

```
text-decoration: underline;

```