Responder a: Como usar "pseudo-elements" :before :after

Home Fórum Desenvolvimento HTML - CSS - JS Como usar "pseudo-elements" :before :after Responder a: Como usar "pseudo-elements" :before :after

#15949

felipemantoan
Moderador

outro exemplo mais prático:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Before E After</title>
	<style>
	p, p.email{
		display:block;
		width:300px;
		height:30px;
		border:1px solid #666;
		border-radius:2px;
		text-align:center;
		line-height: 30px;
	}
	p.email::before
	{
		content: 'Email:';
		background-color:#f2f2f2;
		height:30px;
		display: block;
		width:60px;
		float:left;
		text-align:center;
		border-right:1px solid #666;
	} 
	</style>
</head>
<body>
	<p class="email">felipe@email.com</p>
	<p>felipe@email.com</p>
</body>
</html>