aslamdoctor aslamdoctor - 3 years ago 68
CSS Question

Overlap Text on Border without using any extra elements

On the below code, what I want to do is that the border should stay on the back side of the text. So the text needs to be overlapping the border.

The only issue is, I am not allowed to add any extra html elements like spans or anything else to it as the H1 tag is added by the users who doesn't have any knowledge of html tags.



h1{
position:relative; display:inline-block;
z-index:10;
}
h1::after{
content:""; display:block;
position:absolute; left:0px; bottom:5px;
height:10px; width:100%; background-color:yellow;
z-index:0;
}

<h1>This is the Title</h1>




Answer Source

Use z-index:-1 on the border(:after) and you are good to go

h1{
  position:relative; display:inline-block;
  z-index:10;
}
h1::after{
  content:""; display:block;
  position:absolute; left:0px; bottom:5px;
  height:10px; width:100%; background-color:yellow;
  z-index:-1;
}
<h1>This is the Title</h1>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download