Show Tags as Tags

Excerpt

Why use images when CSS can too. Part 2.

Tags are widely used to classify content. Most of the implementations are using links to show them to the user and a click on a tag can be used for listing all content with the same classification (tag).

In this Advent Calendar implementation 3 classifications are provided for the tags you see below. On every page the relevant tags are added as well. Usually the collections of pages with the same tag can be created automatically by the CMS system. Here a static html file is used for simplification.

Here you find a small CSS that formats links inside a div.taglist container as tags.

CSS JavaScript Reading 
<div class="taglist">
  <a href="tag-css.htm">CSS</a>
  <a href="tag-js.htm">JavaScript</a>
  <a href="tag-html.htm">HTML</a>
</div>

How CSS works

The link elements will rendered as inline blocks to have a rectangular object with the link text inside.

To add the `#` in front of the tag text a ::before element bringing this character is added in CSS.

To make the link like a tag a small triangle is added in the ::after pseudo element.

Padding and margin are adjusted to get a good position of the text and the space between tags.

Here is the CSS code:

.taglist > a {
    display: inline-block;
    height: 1.6em;
    background: #203050;
    text-align: center;
    padding: 0.2em 0.6em;
    position: relative;
    margin-right: 1em;
    text-decoration: none;
    color: #fff;
  }
  
  .taglist > a::before {
    content: "#";
  }
  
  .taglist > a::after {
    content: "";
    border-top: 0.8em solid transparent;
    border-bottom: 0.8em solid transparent;
    border-left: 0.8em solid #203050;
    position: absolute;
    right: -0.8em;
    top: 0;
  }
}

Tags

CSS