How to display :after and :before in browser print preview?

Question

css

Hello, actually there is css:

.sline {
    position: relative;
    border-bottom: 1px solid #555;
    padding: 0 5px;
}

span.sline:after {
    content : "";
    position: absolute;
    right    : 0;
    z-index: 100;
    bottom  : 0;
    width  : 1px;
    height   : 20%;
    background: #555
}
span.sline.all:before {
    content : "";
    position: absolute;
    left    : 0;
    z-index: 100;
    bottom  : 0;
    width  : 1px;
    height   : 20%;
    background: #555;
}

and html:

<span class="sline all">29</span><span class="sline">1588</span>

which generates this beauty:
https://jsfiddle.net/jz377z1p/
Only this beauty is not displayed in the preview and is not printed through the browser (the bottom border remains, the border that is drawn through :after and :before disappears) ... I don't very strong in css, tell me how to fix this misunderstanding?

Answer 1

Give before and after one side border instead of a background

Answer 2

Will only help for firefox.
Background - not displayed when printing, you need to use border in your case and everything will work

span.sline.all:before {
 border-right:1px solid #555;
}