<div class="container">
	<blockquote class="speech" style="--character: '😈'">
		But what if — just hear me out — what if you <em>registered</em> your custom property?
	</blockquote>
</div>
body {
	font: 200% Helvetica Neue, Segoe UI, sans-serif;
}

.speech {
	padding: .5em;
	border-radius: .3em;
	max-width: 30ch;
	position: relative;
	background: hsl(220 10% 85%);
}

/* Speech bubble pointer */
.speech::before {
	content: "";
	position: absolute;
	top: 100%; right: 1.5em;
	width: 1em; height: 1em;
	clip-path: polygon(0 0, 100% 100%, 80% 0);
	background: inherit;
}

.speech::after {
	content: var(--character, '🙂');
	position: absolute;
	right: 0;
	/* This needs to change every time the font-size changes: */
	top: calc(100% + 1em / 2.5); 
	font-size: 250%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.