:before and :after pseudoselectors

by Admiral Potato

HTML

<div class="messenger">

	<div
		class="message left"
		data-initials="ow"
  >
	<span>hey you awake</span>
	</div>

	<div
		class="message right"
	  data-initials="ap"
  >
	<span>no fuck off im sleeping</span>
	</div>

	<div
		class="message left"
		data-initials="ow"
  >
	<span>no but. i have a meme for you</span>
	</div>

	<div
		class="message right"
	  data-initials="ap"
  >
	<span>YOU HAVE AWAKENED THE MEME BEAST</span>
	</div>

	<div
		class="message left"
		data-initials="ow"
  >
	<span>
		<img src="https://www.letseatcake.com/wp-content/uploads/2021/03/goat-memes-21.jpg" />
	</span>
	</div>

</div>

CSS

.messenger {
	font-family: sans-serif;
	max-height: 512px;
	height: 512px;
	width: 384px;
	background-color: #ccc;
	margin: auto;
	overflow-y: auto;
	padding: 24px;
	box-shadow: 0 0 16px 0 #000;
	border-radius: 16px;
}

.message {
	position: relative;
	padding: 8px 0;
}
.message.left:before,
.message.right:after {
	position: absolute;
	z-index: 0;
	bottom: -12px;
	right: -20px;
	display: block;
	content: attr(data-initials);
	text-transform: uppercase;
	color: #fff;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	border-radius: 24px;
	background-color: #333;
}
.message.left:before {
	left: -20px;
	right: none;
}

.message.left {
	text-align: left;
}
.message.right {
	text-align: right;
}
.message span {
	position: relative;
	z-index: 1;
	display: inline-block;
	color: #fff;
	padding: 8px 16px;
	border-radius: 24px;
}
.message span img {
	max-width: calc(100% + 16px);
	border-radius: 16px;
	margin: 0 -8px;
}
.message.left span {
	background-color: #369;
	border-bottom-left-radius: 0;
}
.message.right span {
	background-color: #936;
	border-bottom-right-radius: 0;
}