I'm trying to create a cross hair like this:
<div class="crosshair"></div>
using a single element and pure css?
I thought of using ::after
& ::before
along with the div
but that would only result in 3 bars whereas the image has 4 bars,
I'm not sure if it's even possible but maybe I missed something?
Edit
btw the transparency of the crosshair as a whole changes to see stuff behind it
Edit 2
on @tacoshy request in the comments I'm also adding my "research"
:root{
--bar_thickness:0.5rem;
--bar_length:5rem;
}
.crosshair::before{
content:"";
display:block;
background-color:black;
height:var(--bar_length);
width:var(--bar_thickness);
position:relative;
transform:rotate(90deg);
}
.crosshair {
margin:3rem;
background-color:black;
height:var(--bar_length);
width:var(--bar_thickness);
}
.crosshair::after{
content:"";
display:block;
background-color:white;
height:calc( var(--bar_length) * 0.4);
width:calc( var(--bar_length) * 0.4);
position:relative;
bottom:50%;
left:50%;
transform:translate(-50%,-50%)
}
<div class="crosshair"></div>
but the problem with my approach is when I need it to be transparent as mentioned in the first edit it fails as such:
:root{
--bar_thickness:0.5rem;
--bar_length:5rem;
}
.crosshair::before{
content:"";
display:block;
background-color:black;
height:var(--bar_length);
width:var(--bar_thickness);
position:relative;
transform:rotate(90deg);
}
.crosshair {
position:absolute;
opacity:50%;
margin:3rem;
background-color:black;
height:var(--bar_length);
width:var(--bar_thickness);
}
.crosshair::after{
content:"";
display:block;
background-color:white;
height:calc( var(--bar_length) * 0.4);
width:calc( var(--bar_length) * 0.4);
position:relative;
bottom:50%;
left:50%;
transform:translate(-50%,-50%)
}
<div id="background" style="background-color:red;height:10rem;width:10rem">
<div class="crosshair"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio
</div>