缓慢展开的文字

Question

我正在尝试在 CSS 中扩展文本。我需要的是超链接的一部分，当您将鼠标悬停在它上面时会显示出来。我所拥有的是 JSFiddle 但该特定字体存在行高问题。

我也无法摆脱 line-height，并且出于某种原因，宽度上的过渡不起作用。对我的问题的任何解决方案或任何其他获得预期效果的方法都表示赞赏。

Answer 1

您不能将 css 转换与 auto 一起使用。如果您只需要 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 的回答是正确的。）用vertical-align top 固定高度。另外，下划线有一点缝隙，所以你必须把它加到跨度上，然后在两边加上一个小的负边距：

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

缓慢展开的文字

Slowly expanding text

css

css-transitions