html - CSS 生成 :after content from current current

Question

我试图在鼠标悬停时生成一个 :after 伪元素。例如:

.email{
    width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.email:hover:after{
    content:"the current email address"; /*how I get the content?*/
    position: absolute;
    background-color:white;
}

请查看http://jsfiddle.net/R4YRN/2/完整的例子。

有没有不用 javascript 就可以实现我想要的东西的方法？谢谢。

Answer 1

一种可能性是在数据属性中设置电子邮件，然后检索它:

HTML

<div class="email" data-email="aververyverylongemail@gmail.com">aververyverylongemail@gmail.com</div>
<div>other stuff</div>

CSS

.email{
    width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.email:hover:after{
    content: attr(data-email);
    position: absolute;
    background-color:yellow;
    border: solid 1px black;
}

fiddle