尝试创建类似于此的内容。我无法使用letter-spacing。我创建了这段代码,但它效果不佳。
http://jsfiddle.net/pyqq8wfe/
有任何想法吗?
![enter image description here](https://istack.dev59.com/FqSxG.gif)
.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>