Skip to content
Learn Measure Blog Case studies About
Join and donate to πŸ‡ΊπŸ‡¦ DevFest for Ukraine, a charitable tech conference happening June 14–15 supported by Google Developers and Google Cloud.
  • Home
  • All articles

The amazing powers of CSS

Jun 19, 2012 β€” Updated Feb 9, 2019
Ilmari Heikkinen
Ilmari Heikkinen
TwitterHomepage

Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance, it makes empty links very visible:

a[href = ""] {
background: red;
color: white;
font-size: x-large;
}

Check out the live example at jsFiddle

You can also style absolute links differently from relative links:

a[href ^= http] {
display: inline-block;
color: red;
transform: rotate(180deg);
}

Check out the live example at jsFiddle

If you want to have a different style for links pointing out of your domain, you can use the :not() selector. This is actually how we do the little arrows next to external links at HTML5Rocks.

a[href ^= 'http']:not([href *= 'html5rocks.']) {
background: transparent url(arrow.png) no-repeat center right;
padding-right: 16px;
}

Check out the live example at jsFiddle

Just to remind you that you're not limited to styling links, here's how to make all PNG images inverted:

img[src $= .png] {
filter: invert(100%);
}

Moving on from attribute selectors, did you know that you can make the document head visible, along with the other elements there?

head {
display: block;
border-bottom: 5px solid red;
}
script, style, link {
display: block;
white-space: pre;
font-family: monospace;
}

Or that you can use the awesome power of CSS attr-function to fill in the :after and :before content?

script:before {
content: "<script src=\"" attr(src) "\" type=\"" attr(type) "\">";
}
script:after {
content: "</script>";
}

style:before {
content: "<style type=\"" attr(type) "\">";
}
style:after {
content: "< /style>";
}

/* And for a finish, <link> */
link:before {
content: "<link rel=\"" attr(rel) "\" type=\"" attr(type) "\" href=\"" attr(href) "\" />";
}

Check out the live example at jsFiddle

Note that attr() reads in the attribute values of the matching element, so if you use it for #foo:before, it reads the attributes from #foo.

CSS
Last updated: Feb 9, 2019 β€” Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.