我无法使用letter-spacing.
我创建了此代码,但它并不能很好地运行。
.refreshed_logo {
font-family: ProximaNovaBold;
font-size: 50px;
text-decoration: none;
color: #000000;
}
.logo_wrapper {
color: inherit;
text-decoration: none;
width: 250px;
position: absolute;
}
.refreshed_logo:after {
content: 'digital';
width: 20px;
height: 20px;
text-align: center;
position: absolute;
font-size: 20px;
background-color: red;
border-radius: 18px;
color: white;
margin-left: 4px;
margin-top: 3px;
text-indent: 8px;
font-weight: normal;
line-height: 1;
transition-property: width, height;
transition-duration: 0.2s, 0.2s;
transition-delay: 0s, 0.2s;
-o-transition-property: width, height;
-o-transition-duration: 0.2s, 0.2s;
-o-transition-delay: 0s, 0.2s;
-moz-transition-property: width, height;
-moz-transition-duration: 0.2s, 0.2s;
-moz-transition-delay: 0s, 0.2s;
-webkit-transition-property: width, height;
-webkit-transition-duration: 0.2s, 0.2s;
-webkit-transition-delay: 0s, 0.2s;
}
.refreshed_logo:hover:after {
width: 71px;
-webkit-transition: width 0.5s;
transition: width 0.5s;
text-indent: 2px;
}
.logo_wrapper:hover {
text-decoration: none;
}

<a href="/" class="logo_wrapper">
<span class="refreshed_logo">
Granat
</span>
</a>
&#13;
有什么想法?
答案 0 :(得分:5)
由于您无法使用letter-spacing
或拆分字词,因此以下是使用border-right
的方法,该方法与overflow: hidden
设置一起隐藏了&#39; d&#39;之后的所有字符。在悬停时,它们会被揭示出来,从而产生效果。
.refreshed_logo {
font-family: ProximaNovaBold;
font-size: 50px;
text-decoration: none;
color: #000000;
}
.logo_wrapper {
color: inherit;
text-decoration: none;
width: 250px;
position: absolute;
}
.refreshed_logo:after {
content: 'digital';
width: 20px;
height: 20px;
/*text-align: center; not required */
position: absolute;
font-size: 20px;
background-color: red;
border-radius: 18px;
color: white;
/* following properties were added */
padding-left: 5px;
box-sizing: border-box;
border-right: 5px solid red;
overflow: hidden;
/* end of addition */
font-weight: normal;
line-height: 1;
transition-property: width, height;
transition-duration: 0.2s, 0.2s;
transition-delay: 0s, 0.2s;
}
.refreshed_logo:hover:after {
width: 65px;
transition: width 0.5s;
}
.logo_wrapper:hover {
text-decoration: none;
}
&#13;
<a href="/" class="logo_wrapper">
<span class="refreshed_logo">
Granat
</span>
</a>
&#13;
答案 1 :(得分:0)
我尝试在那里获得相同的结果可能更好:
上次修改:隐藏其他字母我使用相同颜色的背景,只更改第一个字母颜色。
CSS:
.titre{
font-size:20pt;
}
.sstitre{
font-size:10pt;
font-weight:bold;
color:red;
background-color:red;
border-radius:10px;
padding-left:4px;
padding-right:2px;
width:10px;
position: absolute;
overflow:hidden;
transition:width 0.5s;
}
.sstitre::first-letter{
color:white;
}
.titre:hover .sstitre{
width:40px;
color:white;
}
<强> HTML 强>
<span class="titre">Granat<span class="sstitre">digital</span></span>