Как решить проблему с ::before в Сафари?

Question

[sendik]

Привет.
такая проблема: в сафари псевдоэлементы отображаются не правильно, сдвигаются в бок. позишн указан, в других браузерах все хорошо.

<div class="site-title">
	<h1>Блог</h1>
	<h2>Веб-студии Webmonsters</h2>
</div>

.site-title{
	position: relative;
}
.site-title::after {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    width: 1px;
    height: 23px;
    background: #616161;
}

Answer 1

[Ильгиз Хужахметов]

Вот такой вариант попробуй

@media screen and (-webkit-min-device-pixel-ratio:0) {     
    ::i-block-chrome,.site-title::after  {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    width: 1px;
    height: 23px;
    background: #616161;
}
    }

Если этот вариант не помог попробуй

body:first-of-type .class	 { color : #F00 ; }
html:root*.class	 { color : #F00 ; }
body:first-of-type .class	 { color : #F00 ; }
body:first-of-type .class	 { color : #F00 ; }

Comments

[sendik]

не помогло

[Ильгиз Хужахметов]

sendik: Если этот вариант не помог попробуй

body:first-of-type .class { color : #F00 ; }
html:root*.class { color : #F00 ; }
body:first-of-type .class { color : #F00 ; }
body:first-of-type .class { color : #F00 ; }