Hallo,
ich habe einen Link, der im Normalzustand so aussieht:
--- Read more
und beim drüber fahren so:
--------------- Read more
Das heißt, der Text wandert durch die Verlängerung der dünnen Linie nach rechts.
Ich suche nach einer Möglichkeit, die es erlaubt, dass der Text an "Ort und Stelle" bleibt und die dünne Linie sich nach links ausweitet!?
Hier der bisherige Code:
Code
.link-btn3 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 25px;
max-width: 100%;
position: relative;
background: transparent;
}
.link-btn3:before {
content: '';
display: inline-block;
width: 50px;
height: 1px;
position: relative;
top: -1px;
margin-right: 19px;
background: rgba(242,2,11);
-moz-transition: all .851s cubic-bezier(0.25, 0.8, 0.25, 1);
-o-transition: all .851s cubic-bezier(0.25, 0.8, 0.25, 1);
-webkit-transition: all .51s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all .851s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.link-btn3:hover:before {
width: 145px;
background: #828282;
}
Alles anzeigen