Why :before cannot be seen in safari?

Question

I have a code which works brilliant in Chrome: ``` #menu ul { list-style-position: inside; list-style-type: none; display: block; margin: 0 auto; padding: 0; } #menu li { font-size: 11px; width: 95px; display: inline-block; vertical-align: top; position: relative; } #menu li a { color: black; text-decoration: none; } #menu li a img { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; position: absolute; top: 0; left: 22px; margin: 0 auto; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; } #menu li a:hover img { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; } #menu li a:before { content: ""; display: block; background: url('../images/greece.gif') no-repeat center; width: 50px; height: 50px; margin: 0 auto; opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity…

Accepted Answer

just add position:absolute

```
a:before{
position:absolute;
content:"";
top: 0px;
left: 0px;
.....
```

and make sure you ve position relative on a

```
#menu li a{
position:relative;
}
```

for example this works well

```
#menu li a:before {
content: "";
display: block;
background: url('../images/greece.gif') no-repeat center;
width: 50px;
height: 50px;
position: absolute;
opacity: 1.0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
}
```

very important for for css3 dev box-sizing

```
*, *:after, *:before  {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0;
margin:0;
}
```

:before and :after are always position:absolute and the main element should be position relative

Why :before cannot be seen in safari?

Solution

Problem