Question

我正在使用两个首字母，我希望如果用户将其悬停，它将显示文本的其余部分但我无法正确显示其余文本：第一个字母的部分是正确的显示在第二个首字母的文本旁边。

#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;
 }

Answer 1

您在<span>元素中设置了两个字母，使用:nth-of-type()选择器设置content伪元素的: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>

Answer 2

将span标记放在标题标记之外，并按如下方式设置范围标记:after的样式：

span:hover:after{
  opacity: 1; 
  margin-left: 0px;
 }

请参阅下面的代码段

＆＃13;

#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;
 }

＆＃13;

<a id="logo">
   <h1 class="short">
    T
   </h1>
    <span>t</span>
</a>

＆＃13;

在悬停时扩展文本

2 个答案: