CODEWITHSUNDEEP
htmlcss
Wei Ma
Wei Ma

Reputation: 3155

css generate :after content from current current

I am trying to generate an :after pseudo element when mouse hover over. For example:

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

Please check http://jsfiddle.net/R4YRN/2/ for full example.

Is there anyway to achieve what I want without javascript? Thanks.

Upvotes: 0

Views: 59

Answers (3)

vals
vals

Reputation: 64164

One posibility is to set the email in a data attribute, and then retrieve it:

HTML

<div class="email" data-email="[email protected]">[email protected]</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

Upvotes: 3

Siva
Siva

Reputation: 386

Can you check if this will do: jsFiddle

I added the following: 

.email:hover{
    height: auto; white-space: normal; z-index: 1; text-overflow: none; overflow: none;
    width: auto;
}

Your email DIV will contain the email address.

Upvotes: 0

GeNyaa
GeNyaa

Reputation: 113

This is working like intended? if you want it behind it. you need to float or display inline it.

.email:hover .email:after {}

Upvotes: 0

Related Questions