Dunning–Kruger effect

An ignorant mind is precisely not a spotless, empty vessel, but one that’s filled with the clutter of irrelevant or misleading life experiences, theories, facts, intuitions, strategies, algorithms, heuristics, metaphors, and hunches that regrettably have the look and feel of useful and accurate knowledge. This clutter is an unfortunate by-product of one of our greatest strengths as a species. We are unbridled pattern recognizers and profligate theorizers. Often, our theories are good enough to get us through the day, or at least to an age when we can procreate. But our genius for creative storytelling, combined with our inability to detect our own ignorance, can sometimes lead to situations that are embarrassing, unfortunate, or downright dangerous — especially in a technologically advanced, complex democratic society that occasionally invests mistaken popular beliefs with immense destructive power (Dunning, 2014).

Source

Dunning, D. (2014, October 27). We Are All Confident Idiots. Pacific Standard. https://psmag.com/social-justice/confident-idiots-92793

About this CSS code

This CSS code creates a tooltip-style box with a downward-pointing arrow using the :after pseudo-element:

HTML

<div class="demo-arrow">Demo Arrow</div>

CSS

.demo-arrow {
  position: relative;
  background: #222222;    /* Dark background */
  color: #ffffff;		  /* White text */
  padding: 10px 20px;     /* Padding inside the box */
  border-radius: 4px;     /* Rounded corners */
}

.demo-arrow:after {
  content: '';
  position: absolute;
  top: 100%;              /* Position the arrow just below the box */
  left: 50%;              /* Center it horizontally */
  margin-left: -10px;     /* Offset it by half the width of the arrow */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #222222;
}

Explanation

.demo-arrow styles the main box.
position: relative; is necessary to position the arrow relative to this box.
.demo-arrow:after creates the arrow. A triangle is created using border tricks.
width and height are 0, so the visible shape is made entirely from borders.
border-left and border-right are transparent, forming the triangle's sloped sides.
border-top is coloured (#222222, same color as the background of the .demo-arrow), forming the downward-pointing triangle (the arrowhead).

HTML and CSS

Arrow at the bottom of an HTML element

About this CSS code

Explanation

About the author