JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo">

CSS

#logo {
	width: 250px;
	height: 80px;
	background-color: green;

/*
According to Steven Bradley's article (www.vanseodesign.com/css/css-positioning/) "you can’t apply both the position property and the float property to the same element. Both are conflicting instructions for what positioning scheme to use." Consequently he explains that only one of those properties would be used by the browser.
    
However the following use case proves otherwise: Both the float and the position property are needed, as well as applied by the browser. While the float attribute keeps the logo the right, the position property directly influences it's hover image.
Hence, this use case proves that a complementary usage of both attributes is possible and fully makes sense (at least in my eyes).
*/
    
    float: right;
    position: relative;
}

#logo:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-color: red;
	opacity: 0;
	transition: opacity 0.4s;
}

#logo:hover:after {
	opacity: 1;
}