<div class="c">
  <h2>Invalid Characters as HTML Class Delimiters</h2>

  <div class="col col-4 col-8 / c-list / bx bx--rounded bx--transparent">Using slash as delimiter</div>

  <div class="col col-4 col-8 ** c-list ** bx bx--rounded bx--transparent">Using asterisks as delimiter</div>

  <div class="col col-4 col-8 || c-list || bx bx--rounded bx--transparent">Using double pipe as delimiter</div>

  <div class="col col-4 col-8 && c-list && bx bx--rounded bx--transparent">Using ampersands as delimiter</div>
  
  <p>View the HTML to see the invalid characters used in the HTML classes.</p>

  <p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>
</div>

.c {
  max-width: 520px;
  margin: auto;
  text-align: center;
}

.col {
  color: blue;
}

.col-4 {
  outline: solid 1px lightpink;
}

.col-8 {
  font-weight: bold;
}

.country-list {
  border: solid 1px;
}

.bx {
  font-style: italic;
}

.bx--rounded {
  padding: 5px;
}

.bx--semi-transparent {
  margin: 20px;
}

.p {
  font-size: 14px;
  padding-top: 130px;
}