CSS pseudo background-crop (.net)

An example of how to use CSS pseudo-elements to crop images.

by necolas

HTML

<ul class="actions">
    <li class="save"><a href="#">Save</a></li>
    <li class="edit"><a href="#">Edit</a></li>
    <li class="delete"><a href="#">Delete</a></li>
</ul>

CSS

/* CSS pseudo background crop */

.actions li {
    float:left;
    margin:0 5px 0 0;
    font:bold 14px/1.2 Arial, sans-serif;
}

.actions a {
    display:block;
    padding:5px;
    border:1px solid #eee;
    text-decoration:none;
    color:black;
}

.actions a:hover,
.actions a:focus,
.actions a:active {
    border-color:blue;
    color:blue;
}

/* Crop and display the icons */

.actions a:before {
    content:"";
    float:left;
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    /* using a data URI (see notes)...

JavaScript

/*

NOTES:

- Uses a data URI for the background image.
  This is simply to avoid having to link to an 
  image on a remote server. While using data URIs can save you from
  making additional HTTP requests, they are not necessary for this
  technique to work

*/