CSS hide elements behind logo - html

Question

I have a problem where I need to remove/hide a line behind my transparent logo:
The white line needs to be beside the logo, but it should not be shown behind. - And no, I will not add a black background..
Code:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 90%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
Span will become a transparent image, this is just for testing..

Answer 1

You can check out the Line-On-Sides Headers CSS Trick.
Something like this:
body {
background-color: black;
color: white;
}
.fancy {
line-height: 0.10;
text-align: center;
font-size: 81px;
margin-top: 20px;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-top: 1px solid white;
top: 0;
width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<div class="fancy"><span class="fancy">LOGO</span>
</div>
Source

Answer 2

Since you have a transparent background, I think the only way is to duplicate the line div and divide it in two, one left and one right, I don't know the dimensions you need, but you should have something like this:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 30%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
<div style="position: absolute;margin-top: 74px;margin-left: 60%;width: 30%;height: 2px;background-color: #FFF;"></div>
Hard to say the correct margins without knowing where they are contained, you should post the entire HTML if you want more help.

Answer 3

I would absolutely position the elements in a container and then arrange them with z-index to ensure they stack in the correct order. I have created a JSfiddle with a quick example of how to acheive this:
https://jsfiddle.net/bL0dfkvq/
The key here is the z-index on the text is:
z-index:10;
The z-index on the hr line is:
z-index:5;

Answer 4

Few things...
1. Your methods of positioning in the code snippet you included are, quite frankly, awful. I'd clean this up and not using things like padding: 43% to position your elements - make sure you have a sturdy foundation before you go building a house on it! I'd suggest checking out some resources in regards to positioning elements using CSS - given that you've provided just a 2-line snippet, I can't exactly go into what proper methods would be in your case.
2.
And no, I will not add a black background..
You're acknowledging the simplest working answer, yet you don't want to use it...? Why not? Do you mean you don't want to apply a background to the image? You can just add it to the span using background-color: black;
3. Again, I don't approve of position the elements in this manner, however using your snippet (and applying the 43% on the margin instead of padding), you can achieve this: https://jsfiddle.net/dgat2q34/
For additional space between the line and the text, you'd then use padding on the span.
EDIT: Kaiwen Huang brings up a good point - if you didn't want to use specifically black as I've included in my example, you can change the span's background to background-color: inherit; instead.

Answer 5

You might test this code:
<div id="#bg" style="border:1px solid ; position:relative; background-color:black; display: inline-block"><hr id="line" style="border: 1px solid #ffffff; position:absolute; width:98%; top:50%; z-index: 0;margin:0"><div id="#container" style="border:1px solid ;position:relative; background-color:none; display: inline-block"><div style="margin:0px 35px; font-family:Arial, Helvetica, sans-serif; color:#333333; font-size: 80px">LOGO</div></div></div>

Answer 6

Just set your logo to have a higher z-index: than the line.
Z-index is basically:
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.