Template:Cross Conversion/styles.css

.flw-cross-conversion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
}

.flw-cross-conversion a {
  display: inline-block;
  margin: 6px 0 12px;
  min-width: 1.25em;
  text-align: center;
}

/* This relies on e.g {{IL|Brilliant Soul|Appearance=&#8203;}} generating two <a> elements,
   one with the image, and another containing a ZeroWidthSpace that gets
   the class .mw-selflink applied when displayed in its own page, giving
   us something to style a visual "you-are-here" pointer.
 */
.flw-cross-conversion a:nth-child(3n+2) {
  min-width: 0;
  margin: 0;
}

.flw-cross-conversion a.mw-selflink {
  position: relative;
}

.flw-cross-conversion .mw-selflink::before {
  position: absolute;
  border: 12px solid transparent;
  border-bottom: 8px solid;
  border-top: 0;
  width: 0;
  height: 2px;
  left: -26px;
  top: 26px;
  display: inline-block;
  content: "";
}