CODEWITHSUNDEEP
htmlcssfont-awesomelistitem
Tushar Sethi
Tushar Sethi

Reputation: 344

CSS Pseudo Element ::marker not visible on Mobile Phones (IOS)

I am Creating a Static Website and I am using a pseudo element of marker to change the List Items icons using Font Awesome icons and I am hosting the website on github Pages.

I am able to see the list item icons when I use my Laptop to view the page and when I use the Toggle Device toolbar and select a mobile phone screen in chrome on laptop I am able to view the correct result. But When I view it on my IOS device I cant see the expected result. I am unable to debug the problem. Can anyone help me out point out the mistake.

Here is the Code snippet to implement the Icon for List Item. It works perfectly fine in laptop screen.

.className ul li::marker{
      color:var(--heading);
      font-size:20px;
      content: "\f064";
      font-family: 'Font Awesome 6 Free';
      font-weight: 700;
      justify-content: center;
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="className">
<ul>
<li> First</li>
<li> Second</li>
<li> Third</li>
</ul>

</div>

enter image description here

Now when I view it on my phone it would appear as a circle instead of arrow.

Now this is working fine in laptop browser but not on an IOS device.

Upvotes: 1

Views: 2601

Answers (2)

Venish Patel
Venish Patel

Reputation: 11

content property of marker is not supported by Safari. So add that content value to list-style-type of <ul> element

https://github.com/webcompat/web-bugs/issues/137820#issuecomment-2165560878

Upvotes: 1

Frank Conijn - Support Ukraine
Frank Conijn - Support Ukraine

Reputation: 3190

EDIT:

See if changing the double colon to a single one cures it. Older Safaris only support single colons in pseudo element selectors.

Also, Safari's support for marker is limited to color and font-size: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

Upvotes: 3

Related Questions