Question

我正在尝试在CSS中扩展文本。我需要的是悬停在其上的超链接的一部分。我所拥有的是 JSFiddle ，但是该特定字体存在行高问题。

我也无法摆脱line-height，并且出于某种原因，宽度上的转换不起作用。我的问题的任何解决方案或任何其他方法都可以获得所需的效果。

Answer 1

您无法使用auto的css转换。如果您只需要CSS解决方案，则需要一个固定值：JS Fiddle - fixed width

span {
    display: inline-block;
    width: 0;
    transition: width 0.25s linear;
    overflow-x: hidden;
    vertical-align: middle;
}
a:hover span {
    width: 100px;
}

或者，您可以设置最大宽度和转换。这样，它仍然允许动态内容。但是，根据其中包含的内容量，速度会有所不同，因为转换仍将继续，直到达到最大宽度（事件以为您不会看到它）：JS Fiddle - max-width-transition

span {
    display: inline-block;
    max-width: 0;
    transition: max-width 0.25s linear;
    overflow-x: hidden;
    vertical-align: middle;
}
a:hover span {
    max-width: 300px;
}

Answer 2

（抱歉，还没有评论...... dwreck08的答案是正确的。）用垂直对齐顶部固定高度。此外，下划线有一个小的间隙，所以你必须将它添加到跨度，然后在边上加一个小的负边距：

span {
    display: inline-block;
    text-decoration: underline;
    width: 0;
    transition: width 0.25s linear;
    overflow-x: hidden;
    vertical-align: top;
}

a:hover span {
    width: 55px;
    margin: 0 -1px;
}

Answer 3

   Try this

 @font-face {
      font-family: 'Bree Serif';
      font-style: normal;
      font-weight: 400;
      src: local('Bree Serif'), local('BreeSerif-Regular'), url(http://fonts.gstatic.com/s/breeserif/v5/0daoUMW28nkWOnFz2G4AAgsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
      unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Bree Serif';
      font-style: normal;
      font-weight: 400;
      src: local('Bree Serif'), local('BreeSerif-Regular'), url(http://fonts.gstatic.com/s/breeserif/v5/LQ7WLTaITDg4OSRuOZCpswzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
    }

    h1 {
        text-align: center;
        height: 200px;
        background: #aaa;
    }
    a {
        font-size: 100px;
        line-height: 200px;
        font-family: "Bree Serif";
        display: inline-block;
        text-decoration: underline;
        transition: linear all 1s;
        -webkit-transition: linear all 1s;
        -moz-transition: linear all 1s;
    }
    span {
        display: none;
        transition: width 0.25s linear;
        overflow-x: hidden;

    }
    a:hover {
        color: red;
    }

    a:hover span {
        width: auto;
        display: inline;
    }

慢慢扩展文字

3 个答案: