CSS: Cosmetic Content Without The Bloat

By Javier Julio

Some examples might not work in IE8 and below.

Use analytics to determine support!

Examples taken from myfdb.com

Pseudo Classes

A pseudo class is a keyword added to a selector that targets a specific state of that element.

• :first-child
• :last-child
• :only-child
• :first-of-type
• :last-of-type
• :only-of-type
• :nth-child()
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :not()
• :checked
• :enabled
• :disabled
• more...

.media:only-of-type {
  margin-bottom: 0;
}

<div class="profile-header">
  ...
  <div class="media"></div>
  ...
</div>

.credit-group:nth-of-type(5n) {
  margin-right: 0;
}

<div class="credit-groups">
  <header></header>
  <div class="credit-group"></div>
  <div class="credit-group"></div>
  ...
</div>

Pseudo Elements

A pseudo element is used just like a pseudo class but instead of selecting state it allows you to style certain parts of an element.

• :after (IE8+)*
• :before (IE8+)*
• ::first-letter
• ::first-line
• ::selection

* supported by IE8 when using single colon and in IE8 Standards mode

:before and :after

• Think of it as a ghost or sub element.
• CSS inheritance rules apply.
• Inline by default.
• Typically used for cosmetic content.

Divided Horizontal List

• View
• Edit
• Delete

<ul class="nav nav-divided">
  <li><a href="/">View</a></li>
  <li><a href="/">Edit</a></li>
  <li><a href="/">Delete</a></li>
</ul>

.nav-divided li:after {
  content: "\2022"; /* • */
  margin: 0 20px;
}

.nav-divided li:last-child:after {
  content: '';
  margin: 0;
}

.nav-divided li + li:before {
  content: "\2022"; /* • */
  margin: 0 20px;
}

Fixed Drop Shadow

.modal-header {
  position: relative;
}

.modal-header:after {
  box-shadow: inset 0 7px 4px -4px rgba(0,0,0,.2);
  content: "";
  height: 10px;
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
}

Custom Checkboxes

<div class="control-boolean">
  <input type="checkbox" id="s1">
  <label class="facebook" for="s1">Facebook</label>
</div>
<div class="control-boolean">
  <input type="checkbox" id="s2">
  <label class="twitter" for="s2">Twitter</label>
</div>

.control-boolean {
  display: inline-block;
  height: 60px;
  position: relative;
  width: 60px;
}

.control-boolean input {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}

.control-boolean label {
  display: block;
  height: 100%;
  text-indent: -9999px;
  width: 100%;
}

.control-boolean label:before {
  float: left;
  height: 100%;
  text-indent: 0;
  width: 100%;
}
control-boolean label.facebook:before {
  content: "f";
}
...

.control-boolean input:checked ~ label.facebook {
  background-color: #5c7fc9;
  color: #fff;
  ...
}
...

.control-boolean:not(:checked) {
  ... all those custom styles go here ...
}

Ignored by browsers that don't understand :not.

So.. that content property

How do we make dynamic content?

<abbr title="Cascading Style Sheets">CSS</abbr>

CSS

abbr[title]:after {
  content: " (" attr(title) ")";
}

.article abbr[title]:first-of-type:after {
  content: " (" attr(title) ")";
}

CSS ipsum dolor sit amet, consectetur adipiscing elit. CSS volutpat ullamcorper ligula, sed vulputate nibh interdum ut. CSS lobortis tellus id nulla convallis luctus.

hint.css

<a class="hint hint-left"
      data-hint="Favorite">&#x2665;</a>

.hint {
  display: inline-block;
  position: relative;
}

:before is the tooltip arrow
:after is the tool tip body

.hint:before, /* tooltip arrow */
.hint:after {   /* tooltip body */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1000;
}

.hint:hover:before, /* tooltip arrow */
.hint:hover:after {   /* tooltip body */
  opacity: 1;
}

.hint:before { /* tooltip arrow */
  border: 10px solid transparent;
  content: "";
  z-index: 1001;
}

.hint:after { /* tooltip body */
  content: attr(data-hint);
}

.hint-left:before { /* tooltip arrow */
  bottom: 50%;
  margin-bottom: -10px;
  margin-right: -4px;
}
.hint-left:after { /* tooltip body */
  bottom: 0;
  margin-right: 15px;
}