/* #### EXAMPLES ########################################################## */

.example {
  position: relative;
  display: inline-block;
  margin: 2em auto;
}

.example span {
  position: relative;
  display: inline-block;
}


.example .above, .example .below {
  position: absolute;
  font-size: 0.8em;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Source Sans Pro", Helvetica, sans-serif;
}

.example .above {
  bottom: 100%;
  padding-bottom: 0.2em;
}

.example .below {
  top: 100%;
  padding-top: 0.2em;
}

#example-1 .element {
  border-width: 0 0 4px 0;
  border-style: solid;
  border-color: var(--example-green);
  margin-bottom: 1em;
}

#example-1 .element span.below {
  color: var(--example-green);
}

#example-1 .content {
  border-width: 0 0 4px 0;
  border-style: solid;
  border-color: var(--example-blue);
  margin-bottom: 1.5em;
}

#example-1 .content span.below {
  color: var(--example-blue);
}

#example-1 .tag {
  border-width: 4px 0 0 0;
  border-style: solid;
  border-color: var(--example-orange);
  margin-top: 1em;
}

#example-1 .tag span.above {
  color: var(--example-orange);
}

/*  EXEMPEL 2  */

#example-2 {
  position: relative;
  display: inline-block;
  margin: 2em auto;
}

#example-2 span {
  position: relative;
  display: inline-block;
}


#example-2 .below {
  position: absolute;
  font-size: 0.8em;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  top: 100%;
  padding-top: 0.2em;
}

#example-2 .attribut {
  border-width: 0 0 4px 0;
  border-style: solid;
  border-color: var(--example-green);
  margin-bottom: 1em;
}

#example-2 .attribut span.below {
  color: var(--example-green);
}