CSS Content property does not work on safari

Question

I have and element and on hover it has an arrow appearing. The problem is that it works on chrome and firefox but does not work on safari 12. It works on safari 10 though.

So far I found out that the problem is content:url('../path/to/arrow.png') If I replace path to the arrow with content: '1234' then it works for some reason. here is a full code

<style>
.textwidget a {
    border-radius: 0;
    background-color: none;
    color: #fff;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin-top: 101px;
    margin-bottom: 94px;
    margin-left: -10px;

}

.textwidget a {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.textwidget a:after {
    font-family: "Font Awesome 5 Free" !important;
    content: url(../public/assets/images/icons/arrow-right-small-white.png) !important;
    font-weight: 600 !important;
    position: absolute;
    opacity: 0;
    top: 3px;
    right: 23px;
    transition: 0.5s;
}

.textwidget a:hover{
    padding-right: 24px;
    padding-left:3px;
}

.textwidget a:hover:after {
    opacity: 1;
    right: 10px;
}

</style>

<div class="textwidget">
   <p>
      <a href="#">Link</a>
   </p>
</div>

So my desired output is that content: url(../public/assets/images/icons/arrow-right-small-white.png)

works also on safari 12

Looks similar to https://stackoverflow.com/questions/17341728/background-image-not-showing-in-safari — Mahendra Pratap, Aug 23 '19 at 07:14
@MahendraPratap Thanks for the input but I tried all of them and still does not work — Davis, Aug 23 '19 at 07:39

score -1 · Answer 1 · answered Aug 23 '19 at 07:08

-1

Try mount the arrow on span element instead and do it like in docs, so without content property

answered Aug 23 '19 at 07:08

martingeorgiu

44
7

CSS Content property does not work on safari

1 Answers1