<div class="stroke-1">1. Hover me</div>
<div class="stroke-2" data-text="2. Hover me">2. Hover me</div>
<div class="stroke-3" data-text="3. Hover me">3. Hover me</div>
<div class="stroke-4" data-text="4. Hover me">4. Hover me</div>
<div class="stroke-5" data-text="5. Hover me">5. Hover me</div>
<div class="stroke-6" data-text="6. Hover me">6. Hover me</div>
<div class="stroke-7" data-text="7. Hover me">7. Hover me</div>
<div class="stroke-8" data-text="8. Hover me">8. Hover me</div>

.stroke-1 {
  text-shadow:
    1px 0 var(--c,#0000),
    0 1px var(--c,#0000),
    0 -1px var(--c,#0000),
    -1px 0 var(--c,#0000);
  transition: .4s;
  mix-blend-mode: darken;
}
.stroke-1:hover {
  color: #fff;
  --c: #000;
}



.stroke-2 {
  mix-blend-mode: darken;
  color: #0000;
}
.stroke-2:before,
.stroke-2:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  transition: .4s linear;
}
.stroke-2:before {
  color: #fff;
  text-shadow:
    1px 0 #000,
    0 1px #000,
    0 -1px #000,
    -1px 0 #000;
  clip-path: inset(0 0 100%);
 }
.stroke-2:after {
  color: #000;
  clip-path: inset(0 0 0 0);
}
.stroke-2:hover:before {
  clip-path: inset(0 0 0 0);
}
.stroke-2:hover:after {
  clip-path: inset(100% 0 0);
}


.stroke-3 {
  mix-blend-mode: darken;
  color: #0000;
}
.stroke-3:before,
.stroke-3:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  transition: .4s linear;
}
.stroke-3:before {
  color: #fff;
  text-shadow:
    1px 0 #000,
    0 1px #000,
    0 -1px #000,
    -1px 0 #000;
  clip-path: inset(0 100% 0 0);
 }
.stroke-3:after {
  color: #000;
  clip-path: inset(0 0 0 0);
}
.stroke-3:hover:before {
  clip-path: inset(0 0 0 0);
}
.stroke-3:hover:after {
  clip-path: inset(0 0 0 100%);
}


.stroke-4 {
  mix-blend-mode: darken;
  color: #000;
  transition: .4s;
}
.stroke-4:hover {
  color: #fff;
}
.stroke-4:before,
.stroke-4:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: #0000;
  text-shadow:
    1px 0 var(--c,#0000),
    0 1px var(--c,#0000),
    0 -1px var(--c,#0000),
    -1px 0 var(--c,#0000);
  transition: inherit;
}
.stroke-4:before {
  clip-path: inset(0 0 50% 0);
 }
.stroke-4:after {
  clip-path: inset(50% 0 0 0);
}
.stroke-4:hover:before {
  color: #fff;
  --c: red;
}
.stroke-4:hover:after {
  color: #fff;
  --c: blue;
}


.stroke-5 {
  mix-blend-mode: darken;
  color: #000;
  transition: .4s;
}
.stroke-5:hover {
  color: #fff;
}
.stroke-5:before,
.stroke-5:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: #0000;
  text-shadow:
    1px 0 var(--c,#0000),
    0 1px var(--c,#0000),
    0 -1px var(--c,#0000),
    -1px 0 var(--c,#0000);
  transition: inherit;
  -webkit-mask: linear-gradient(var(--d,90deg),#0000,#000);
}
.stroke-5:after {
  --d: -90deg;
}
.stroke-5:hover:before {
  color: #fff;
  --c: green;
}
.stroke-5:hover:after {
  color: #fff;
  --c: purple;
}

div.stroke-6 {
  font-family: monospace;
  mix-blend-mode: darken;
  color: #000;
  transition: .4s;
}
.stroke-6:hover {
  color: #fff;
}
.stroke-6:before,
.stroke-6:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: #0000;
  text-shadow:
    1px 0 var(--c,#0000),
    0 1px var(--c,#0000),
    0 -1px var(--c,#0000),
    -1px 0 var(--c,#0000);
  transition: inherit;
  -webkit-mask: repeating-linear-gradient(90deg,#0000 0 1ch,#000 0 2ch);
}
.stroke-6:after {
  -webkit-mask: repeating-linear-gradient(90deg,#000 0 1ch,#0000 0 2ch);
}
.stroke-6:hover:before {
  color: #fff;
  --c: green;
}
.stroke-6:hover:after {
  color: #fff;
  --c: blue;
}

.stroke-7 {
  mix-blend-mode: darken;
  color: #000;
  transition: .4s;
}
.stroke-7:hover {
  color: #fff;
}
.stroke-7:before,
.stroke-7:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: #0000;
  text-shadow:
    1px 0 var(--c,#0000),
    0 1px var(--c,#0000),
    0 -1px var(--c,#0000),
    -1px 0 var(--c,#0000);
  transition: inherit;
  -webkit-mask: repeating-linear-gradient(-45deg,#0000 0 8px,#000 0 16px);
}
.stroke-7:after {
  -webkit-mask: repeating-linear-gradient(-45deg,#000 0 8px,#0000 0 16px);
}
.stroke-7:hover:before {
  color: #fff;
  --c: #000;
}
.stroke-7:hover:after {
  color: #000;
  --c: #000;
}


.stroke-8 {
  mix-blend-mode: darken;
  color: #000;
  transition: .3s;
}
.stroke-8:hover {
  color: #fff;
}
.stroke-8:before,
.stroke-8:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: #0000;
  text-shadow:
    1px 0 var(--c,#0000),
    0 1px var(--c,#0000),
    0 -1px var(--c,#0000),
    -1px 0 var(--c,#0000);
  -webkit-mask-image: linear-gradient(135deg,#000 calc(50% - 20px),#0000 0 calc(50% + 20px), #000 0);
  -webkit-mask-size: 250% 100%;
  -webkit-mask-position: right;
  transition:.3s, -webkit-mask-position 0s;
}
.stroke-8:after {
  -webkit-mask-image: linear-gradient(135deg,#0000  calc(50% - 20px),#000 0 calc(50% + 20px), #0000  0);
}

.stroke-8:hover:before,
.stroke-8:hover:after {
  -webkit-mask-position: left;
  --c: #000;
  transition: .3s, -webkit-mask-position .4s .3s linear;
}
.stroke-8:hover:before {
  color: #fff;
}
.stroke-8:hover:after {
  color: #000;
}


/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
  position: relative;
}
[class]:before,
[class]:after {
  pointer-events: none;
}

body {
  text-align:center;
}