How to fade in changes to elements in CSS - html

Question

I am trying to fade in edits to elements in CSS when an element is hovered over. Specifically changing a border from solid to dotted, by fading in the change, how do I do that?
EDIT:
Perhaps I need to be more specific about context here is my current code:
li {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: black;
border-bottom: 1px solid black;
}
li:hover {
border-bottom: 1px dotted black;
opacity: 1;
transition: opacity 1s ease-in-out;
}

Answer 1

Here is some CSS trickery that gives that effect. The downside being the inside cannot be transparent.
div {
position: relative;
width: 50px;
height: 50px;
display: block;
border: 3px dotted red;
background: red;
transition: 1s ease-in-out all;
}
div:after {
position: absolute;
content: ' ';
top: 0;
bottom: 0;
left: 0;
right: 0;
background: white;
}
div:hover {
background: transparent;
}
<div></div>

Answer 2

You could place 2 divs on top of each other with different stroke types then transition them out.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
}
div {
width: 11rem;
height: 11rem;
margin: auto;
background-color: #f2f2f2;
border: 5px #bbb solid;
border-radius: 2rem;
opacity: 1;
cursor: pointer;
}
.dotted {
border: 5px #bbb dotted;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
z-index: 0;
}
.solid {
position: relative;
z-index: 1;
transition: opacity 1s;
}
.solid:hover {
opacity: 0;
}
<div class="solid"></div>
<div class="dotted"></div>

Answer 3

You can achieve this using pseudoelements. This version works even with transparent background. Added gradient to body to show this.
div {
position: relative;
/* just styles for demo */
width: 250px;
height: 250px;
border-width: 5px;
border-style: solid;
transition: 1s ease-in-out all;
border-radius: 10px;
}
div:after {
position: absolute;
content: ' ';
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border-width: inherit;
border-style: dotted;
border-radius: inherit;
}
div, div:after {
border-color: tomato;
}
div:hover {
border-color: transparent;
}
/* just styles for demo showing that this will work even for transparent background */
body {
background-image: linear-gradient(to bottom, transparent, #ddd);
min-height: 100vh;
margin: 0;
}
<div></div>

Answer 4

It's not a soo elegant solution but it goes off of 'Niet the Dark Absol's' comment on my original question. Here is the code:
li {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: black;
position: relative;
border-bottom: 1px solid transparent; /* invisible border */
}
li:before, li:after {
content: '';
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: -1px; /* same as border width */
transition: opacity 1s linear;
}
li:before {
border-bottom: 1px solid #000;
}
li:after {
border-bottom: 1px dotted #000;
opacity: 0;
}
li:hover:before {
opacity: 0;
}
li:hover:after {
opacity: 1;
}