<div class="unexpected-1">1. Hover me</div>
<div class="unexpected-2">2. Hover me</div>
<div class="unexpected-3">3. Hover me</div>
<div class="unexpected-4">4. Hover me</div>
<div class="unexpected-5">5. Hover me</div>
<div class="unexpected-6">6. Hover me</div>
<div class="unexpected-7">7. Hover me</div>

.unexpected-1 {
  line-height: 1.4em;
  padding: 0 10px;
}
.unexpected-1:before,
.unexpected-1:after {
  content: "";
  position: absolute;
  height: 3px;
  background: currentColor;
  width: 1.4em;
  transition: .4s;
}
.unexpected-1:before {
  inset: auto auto 0 0;
  transform-origin: left;
  transform: rotate(270deg);
}
.unexpected-1:after {
  inset: auto 0 0 auto;
  transform-origin: right;
  transform: rotate(-270deg);
}
.unexpected-1:hover:before,
.unexpected-1:hover:after {
  transform: rotate(0);
  width: 50%;
}


.unexpected-2 {
  line-height: 1.4em;
  padding: 0 10px;
}
.unexpected-2:before,
.unexpected-2:after {
  content: "";
  position: absolute;
  height: 3px;
  background: currentColor;
  width: 1.4em;
  transition:.3s;
}
.unexpected-2:before {
  inset: auto auto 0 0;
  transform-origin: left;
  transform: translateY(-1.4em) rotate(90deg);
}
.unexpected-2:after {
  inset: auto 0 0 auto;
  transform-origin: right;
  transform: translateY(-1.4em) rotate(-90deg);
}
.unexpected-2:hover:before,
.unexpected-2:hover:after {
  transform: rotate(0)  translateY(0);
  width: 50%;
}


.unexpected-3 {
  line-height: 1.4em;
  padding: 0 10px;
}
.unexpected-3:before,
.unexpected-3:after {
  content: "";
  position: absolute;
  height: 3px;
  background: currentColor;
  width: 1.4em;
  transform: rotate(270deg);
  transition: .4s;
}
.unexpected-3:before {
  inset: auto auto 0 0;
  transform-origin: left;
}
.unexpected-3:after {
  inset: 0 0 auto auto;
  transform-origin: right;
}
.unexpected-3:hover:before,
.unexpected-3:hover:after {
  transform: rotate(0);
  width: 100%;
}

.unexpected-4 {
  line-height: 1.4em;
  padding: 0 10px;
  transition: .3s;
  z-index: 0;
}
.unexpected-4:hover {
  color: #fff;
  transition: .3s .3s;
}
.unexpected-4:before,
.unexpected-4:after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 3px;
  background: #000;
  width: 1.4em;
  transform: rotate(270deg);
  transition: .3s .3s,height .3s;
}
.unexpected-4:before {
  inset: auto auto 0 0;
  transform-origin: left;
}
.unexpected-4:after {
  inset: 0 0 auto auto;
  transform-origin: right;
}
.unexpected-4:hover:before,
.unexpected-4:hover:after {
  transform: rotate(0);
  width: 50%;
  height: 100%;
  transition: .3s,height .3s .3s;
}


.unexpected-5 {
  line-height: 1.4em;
  padding: 0 10px;
  background:
    linear-gradient(currentColor 0 0) 0 0,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size: 3px 0;
  background-repeat: no-repeat;
  transition: .3s;
}
.unexpected-5:hover {
  background-size: 3px 100%;
  transition: .3s .4s;
}
.unexpected-5:before,
.unexpected-5:after {
  content: "";
  position: absolute;
  height: 3px;
  background: currentColor;
  width: 1.4em;
  transform: rotate(270deg);
  transition: .4s .3s;
}
.unexpected-5:before {
  inset: auto auto 0 0;
  transform-origin: left;
}
.unexpected-5:after {
  inset: 0 0 auto auto;
  transform-origin: right;
}
.unexpected-5:hover:before,
.unexpected-5:hover:after {
  transform: rotate(0);
  width: 100%;
  transition: .4s;
}


.unexpected-6 {
  line-height: 1.4em;
  padding: 0 10px;
  z-index: 0;
  transition: .3s;
}
.unexpected-6:hover {
  color: #fff;
}
.unexpected-6:before,
.unexpected-6:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 3px;
  background: #000;
  height:100M;
  transition:.3s;
}
.unexpected-6:before {
  inset: 0 auto 0 0;
  transform: rotate(180deg);
  transform-origin: left;
}
.unexpected-6:after {
  inset: 0 0 0 auto;
  transform: rotate(-180deg);
  transform-origin: right;
}
.unexpected-6:hover:before,
.unexpected-6:hover:after {
  width: 50%;
  transform: rotate(0);
}


.unexpected-7 {
  padding: 10px;
}
.unexpected-7:hover {
  color:#0005;
}
.unexpected-7:before{
  content: "hovered";
  font-weight: bold;
  color: red;
  position: absolute;
  inset: 50% 0 auto;
  text-align: center;
  transform:translateY(-50%) scale(1.5) rotate(10deg);
  opacity: 0;
  transition:.4s;
}
.unexpected-7:hover:before{
  transform:translateY(-50%) scale(1) rotate(-10deg);
  opacity: 1;
}
  
/**/
[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;
  overflow:hidden;
}