<p>Currently active media query</p>

p::after {
	content: " - default";
	font-weight: bold;
}

/* sm */
@media (min-width: 100px) {
	p::after {
		content: " - sm";
	}
}
/* lg */
@media (min-width: 300px) {
	p::after {

		content: " - lg";
	}
}
/* xl */
@media (min-width: 400px) {
	p::after {

		content: " - xl";
	}
}
/* md */
@media (min-width: 200px) {
	p::after {

		content: " - md";
	}
}

body {
	text-align: center;
	padding-top: 20px;
}