CSS Content | CSS: Presentation Layer

• chriscoyier@gmail.com

<style>.email-address:before {content: "Email address: "}</style>
<ul><li class="email-address">chriscoyier@gmail.com</li></ul>

Markup and Styles

<
>

Demo Document - Example Trick: Fancy Email Link Popouts

Markup and Styles

<
>

Display full urls of Links in Print Style Sheets

Markup and Styles

@media print {.content a[href]:after{"("attr(href)")";}

Using Attributes with css Content

The example below accesses the title attribute of the anchor element, from the content property, like so:

Markup and Styles

<a title="A web design community."
  href="http://css-tricks.com">
  CSS-Tricks
</a>

/** css **/
div.demobox.using-attributes a:before{
  content:attr(title) ": "
}

css3 Tooltips via Attributes with css Content

The example below displays tooltips for anchor elements links based on the title attribute:

Markup and Styles

<div class="demobox attributes-tooltips">
  <a class="tooltip" 
    title="Tooltip in title Attribute" 
      href="#nogo">
      Tooltip in title Attribute
  </a>
</div>



/** css **/
.tooltip{color:#900; text-decoration:none}
.tooltip:hover{color:red; position:relative}
.tooltip[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));
  background-image:-webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc);  
}