Back to CSS Tips
opacity demo using pseudo element ::before

::after is a pseudo element which allows you to insert content onto a page from CSS.

::before is exactly the same only it inserts the content before any other content in the markup.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The markup
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</style>
</head>
<body>  
	<div id="container">  
		<p><span>::after</span> is a pseudo element which allows you to insert content onto a page from CSS.</p>
		<p><span>::before</span> is exactly the same only it inserts the content before any other content in the markup.</p>
	<!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container::before {
	content: "";
	opacity: 0.3;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(IMG_2021-flows.jpg);
}
#container {
	height: 513px;
	width: 380px;
	margin: 30px auto 900px;
	padding: 20px;
	position: relative;
}
#content h1, #content p {margin: 0 0 20px;}
span { background: #f0ff00; }