<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>