I have some CSS classes defined as follows:
.p_box {
position: relative;
}
.p_box span {
background-color: white;
padding-right: 10px;
}
.p_box:after {
content:"";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
height: 20px;
border: 1px solid black;
z-index: -1;
}
Unfortunately, the styling is not working as expected. It worked for text formatting but not for creating a box.
I want it to look like an empty box with borders like this:
some text: |---------|
|---------|
You can view how it currently looks using that styling here.
In my application, both the upper and lower borders are hidden where the text is, but the left border appears incomplete:
some text: -------|
-------|
Upon further consideration, I believe this happens because it hides part of the box rather than creating a solid border. There may be a better approach to achieve the desired result.
Update
To better illustrate what I'm looking for, refer to this image: https://i.sstatic.net/Oyfc5.png
The empty box should appear like this:
<p class="p_box">Test:</p>Update2
Using left: fixed px number; does not fully solve the issue, especially when the length of the text varies. For example, in this instance: https://jsfiddle.net/envLpanh/8/