Expand text on hover
I'm using two initials, and I want the user to hover over the rest of the text, but I can't get it to display the rest of the text correctly: the part of the first letter that is displayed next to the second initial text.
#logo .short{
position: relative;
margin-top: 0;
padding: 0 10px;
font-size: 36px;
display: inline-block;
text-transform: uppercase;
transition: all .3s ease-out;
}
.short:after{
position: relative;
margin-left: -20px;
content: "est1";
opacity: 0;
-webkit-transition: all .3s ease-out;
}
.short:hover:after{
opacity: 1;
display: inline-block;
margin-left: -10px;
}
#logo span{
position: relative;
transition: margin .3s ease-out;
}
span:hover{
margin-left: 20px;
}
span:after{
position: relative;
margin-left: -20px;
content: "est2";
opacity: 0;
-webkit-transition: all .3s ease-out;
}
span:hover:after{
opacity: 1;
margin-left: -10px;
}
+3
source to share
2 answers
You are setting both letters in the element <span>
, use a selector :nth-of-type()
to set the content
alias:after
#logo .short {
position: relative;
margin-top: 0;
padding: 0 10px;
font-size: 36px;
display: inline-block;
text-transform: uppercase;
transition: all .3s ease-out;
}
#logo span {
position: relative;
transition: margin .3s ease-out;
}
.short span:nth-of-type(1):after {
position: relative;
margin-left: -10px;
content: "est1";
opacity: 0;
-webkit-transition: all .3s ease-out;
}
.short span:nth-of-type(1):hover:after {
opacity: 1;
display: inline-block;
margin-left: 0px;
}
span:hover {
margin-left: 20px;
}
.short span:nth-of-type(2):after {
position: relative;
margin-left: 0px;
content: "est2";
opacity: 0;
-webkit-transition: all .3s ease-out;
}
.short span:hover:after {
opacity: 1;
margin-left: 0px;
}
<a id="logo">
<h1 class="short">
<span>T</span><span>t</span>
</h1>
</a>
+3
source to share
Place a span tag outside of your heading tag and simply create a span tag :after
like this:
span:hover:after{
opacity: 1;
margin-left: 0px;
}
see snippet below
#logo .short{
position: relative;
margin-top: 0;
padding: 0 10px;
font-size: 36px;
display: inline-block;
text-transform: uppercase;
transition: all .3s ease-out;
}
.short:after{
position: relative;
margin-left: -20px;
content: "est1";
opacity: 0;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
}
.short:hover:after{
opacity: 1;
display: inline-block;
margin-left: -10px;
}
#logo span{
position: relative;
transition: margin .3s ease-out;
}
span:hover{
margin-left: 20px;
}
span:after{
position: relative;
margin-left: -20px;
content: "est2";
opacity: 0;
-webkit-transition: all .3s ease-out;
}
span:hover:after{
opacity: 1;
margin-left: 0px;
}
<a id="logo">
<h1 class="short">
T
</h1>
<span>t</span>
</a>
+1
source to share