Html 带css3转换的滑出标签

我有以下内容，这是一个带有数字和标记文字的基本定位标签：

<span href="#" class="part-marker">
  <a href="#" class="marker-label">1<span>&nbsp;marker text</span></a>
</span>

---

如何使用css3转换使其在悬停时滑出？我尝试过使用它，但没有成功？？？

请参见下面的简化版本-这里的关键是，您无法对不可缩放的属性进行转换，因此元素从哪里开始显示：无

t
inline block
它只是从隐藏变为显示，因为没有中间点。您可以改为使用
max width
和
overflow
的组合，如下所述

HTML

您也可以使用负数
文本缩进
：

请看下面的代码：

HTML

<a href="#" class="marker-label" text="marker text">
    1
</a>

这里有一个
只是一件小事：过渡：最大宽度1s；
a {
    display:inline-block;
    background:blue;
    color:white;
    padding:0 5px;
}
div {
    position:relative;
}
div span {
    position:absolute;
    display:inline-block;
    max-width:0;
    overflow:hidden;
    transition:all 1s ease-in;
}
a:hover+span {
    max-width:100%;
}

span { 
    text-indent:-150px;
    overflow:hidden;
    display:inline-block;/* triggers layout */
    transition: all 1s ease-in-out;
    /* position:absolute ; not needed since a is already so */
    }
    &:hover {
        span {
            text-indent:0;
        }
    }

<a href="#" class="marker-label" text="marker text">
    1
</a>

.marker-label {
    display:block;
    background:blue;
    color:white;
    padding:4px 8px;
    font-size:1em;
    line-height:1;
    position:relative;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    width:10px;
}
.marker-label:hover {
    width:80px;
}
.marker-label:after {
    content:attr(text);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    position:absolute;
    left:-100px;
}
.marker-label:hover:after {
    left:20px;
}