Как отобразить :after и :before в предварительном просмотре печати в браузере?

Question

[Pavel]

Здравствуйте, собственно есть 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;
}

и html:

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

который генерит от такую красоту:
https://jsfiddle.net/jz377z1p/
Только эта красота не отображается в предварительном просмотре и не печатается через браузер (нижний бордер остается, пропадает бордер который рисуется через :after и :before) ... я не очень силен в css, подскажите как можно исправить сие недоразумение ?

Comments

[Нерон Лордов]

не знаю, дизайнер я, не вертолётчик)

Answer 1

[Ankhena]

Задайте для before и after одну боковую границу вместо фона

Answer 2

[Сергей Тутуков]

Поможет только для firefox.
* { -webkit-print-color-adjust: exact; }

Background - не отображается при печати, нужно использовать border в твоем случаи и все заработает

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