<html>
<head>
<style>
p::before {
content: "Some text" " that should be at an (x,y) of (300,300)";
position: absolute;
left: 300px;
top: 300px;
}
div::after {
float: right;
width:100px;
height:100px;
background-color:green;
color: green;
content: "Invisible";
}
</style>
</head>
<body>
<p></p>
<div>In this paragraph, there should be a right floating green ::after block. It should be ok to do this.
</div>