Tuesday, July 6, 2010

CSS Property "content" and HTML Property "title"

CSS has a property called content. It can only be used with the pseudo elements :after and :before.

CSS Code
email-address:before {
content: "Email address: ";
}

HTML Code
li class="email-address">chriscoyier@gmail.com

Browser Will Render
Email address: chriscoyier@gmail.com


Tooltips from the title attribute
a title="A web design community." href="#">CSS


a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
}


Source: http://css-tricks.com/css-content/

No comments:

Post a Comment