<div class="bypostauthor">
  <article>
    <span class="fn">Josh</span>
  </article>
</div>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body {
  text-align: center;
  margin: 50vh auto;
  background: #ddd;
  max-height: 100%;
  overflow: hidden;
  
  --badge-color: #37633f;
  --checkmark-color: white;
}

.bypostauthor > article .fn {  
  font-family: Montserrat, Verdana, sans-serif;
  font-weight: 500;
	position: relative;
	padding-left: 22px;
}

.bypostauthor > article .fn:before,
.bypostauthor > article .fn:after {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	content: "\2713";
	color: var(--checkmark-color);
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 15px;
	height: 15px;
	line-height: 15px;
	background-color: var(--badge-color);
	border-radius: 20%;
}

.bypostauthor > article .fn:before {
	transform: rotate(45deg);
}