This inline hover effect was achieved with pure CSS and CSS transitions. You can copy the code for this below. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et inline hover justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
1<style>
2
3 .inline-hover{
4 font-weight: 600;
5 color: currentColor;
6 position: relative;
7 padding: 0.25rem 0.75rem 0.25rem 0.75rem;
8 margin: -0.75rem 0 0 0;
9 display: inline-block;
10 background-color: #00000010;
11 }
12
13 .inline-hover:before{
14 content: "";
15 position: absolute;
16 bottom: 0;
17 right: 0;
18 width: 100%;
19 height: 2px;
20 background-color: black;
21 }
22
23 .has-inline{
24 transition: color 0.3s ease;
25 }
26
27 .has-inline:has(.inline-hover:hover){
28 color: #00000050;
29 }
30
31 .inline-hover:hover{
32 color: #000000;
33 }
34
35</style>