html - CSS3 - 文本对齐 : justify not working on data-hover

Question

我有一个由带有链接的列表组成的导航 block 。我希望所有链接的长度都与“text-align:justify”相同，效果很好。我还想使用 CSS3 转换和数据悬停在这些链接上添加悬停效果。那也行。其效果基本上是让同一个词从底部开始翻译，将原始词推到范围之外。这是通过数据悬停完成的(数据悬停指定进入 View 的内容)。我的问题是我无法证明该内容的合理性。我可以更改它的颜色、大小等等任何内容，例如，我什至可以制作一个“text-align:right”，它可以工作，但 text-align: justify 不会。

这是 HTML:

<nav class="cl-effect-5">
    <ul class="main-nav">
        <li><a><span class="fulljustify" data-hover="C&nbsp;O&nbsp;L&nbsp;L&nbsp;E&nbsp;C&nbsp;T&nbsp;I&nbsp;O&nbsp;N">C O L L E C T I O N</span></a></li>
        <li><a><span class="fulljustify" data-hover="A&nbsp;R&nbsp;T&nbsp;&nbsp;&nbsp;I&nbsp;S">A R T   I S</span></a></li>
        <li><a><span class="fulljustify" data-hover="S&nbsp;H&nbsp;O&nbsp;P">S H O P</span></a></li>
        <li><a><span class="fulljustify" data-hover="A&nbsp;B&nbsp;O&nbsp;U&nbsp;T">A B O U T</span></a></li>
    </ul>
</nav>

这是 CSS:

.fulljustify { text-align: justify; text-transform: uppercase; }
.fulljustify:after { content: ""; display: inline-block; width: 100%; }

ul li{
    list-style: none;
}
nav a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.35em;
    width: 100%;
}
span{
    width: 100%;
}

nav a:hover,
nav a:focus {
    outline: none;
}

.cl-effect-5 a {
    overflow: hidden;
    height: 1.35em;
}

.cl-effect-5 a span {
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.cl-effect-5 a span::before {
    position: absolute;
    top: 100%;
    width: inherit;
    color: yellow;
    text-align: justify;
    display: inline-block;
    content: attr(data-hover);
    font-weight: 700;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}

我创建了一个 jsfiddle，因此您可以更清楚地看到我正在寻找的结果是什么: http://jsfiddle.net/Lngvv5hq/

为什么，如果我可以文本对齐:右移数据悬停，文本对齐对齐不起作用？有什么方法可以完成吗？如果我不能通过 text-align:justify 做到这一点，您是否碰巧有其他方法来实现我正在寻找的结果的任何建议？

提前致谢

Answer 1

默认情况下，text-align: justify 不会对齐 block 中的最后一行(或本例中唯一的一行文本)。跨度本身的合理性之所以有效，是因为 100% 宽的 ::after 伪元素总是换行。 Microsoft 引入了 text-align-last: justify(目前被 CSS Text Level 3 规范采用，Firefox 的 supported 带有 -moz- 前缀)，但是 WebKit-/Blink基于 - 的浏览器仍然不支持它。