1

The numbers in this list do not have a shadow (they are just white) in Chrome or Firefox. In IE/Edge they have a shadow. I am trying to get the shadow to display in Firefox and Chrome as well.

I tried adding rgba(0,0,0,1) to the end of each text-shadow line, instead of #000, but that didn't work (like this):

Did not work

text-shadow:
   3px 3px 0 rgba(0,0,0,1),
 -1px -1px 0 rgba(0,0,0,1),  
  1px -1px 0 rgba(0,0,0,1),
  -1px 1px 0 rgba(0,0,0,1),
   1px 1px 0 rgba(0,0,0,1);

Here's a jsfiddle for the code below: https://jsfiddle.net/wxLftaLd/

CSS

#main {
color: #fff;
text-shadow:
   3px 3px 0 #000,
 -1px -1px 0 #000,  
  1px -1px 0 #000,
  -1px 1px 0 #000,
   1px 1px 0 #000;
left: -200px;
margin: auto;
margin-top: auto;
position: relative;
top: 150px;
width: auto;
font-size: 1.5em;
}

ol {
    list-style-position: inside;
    padding-left: 0;
}

HTML

<div id="main">
            <h1 class="center">Friends list</h1>
            <ol>
                <li>Erin</li>
                <li>Jacob</li>
                <li>Frankie</li>
                <li>Bob</li>
            </ol>
</div>
Adrift
  • 58,167
  • 12
  • 92
  • 90
PopSmith
  • 103
  • 7
  • 2
    One of my favorites. Normally, text decorations don't propagate to list marker boxes, which is why Chrome and Firefox don't apply text shadows to the list markers. But while it doesn't make much sense for a bullet point to have an underline, neither does it make any sense for a bullet (i.e. a list-style-type, not list-style-image) or number *not* to have a text shadow. I see this all the time on my own site in Chrome and Firefox, and it really ruins it for me. – BoltClock Feb 15 '17 at 17:57
  • Possible duplicate of http://stackoverflow.com/q/23853647/2803565 – S.Serpooshan Feb 15 '17 at 18:17

1 Answers1

2

Try the following:

#main {
    color: #fff;
    text-shadow:
     3px 3px 0 #000,
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
    left: -200px;
    margin: auto;
    margin-top: auto;
    top: 150px;
    width: auto;
    font-size: 1.5em;
}

ol {
    counter-reset: li;
    list-style-type: none;
}

ol li {
    position:relative;
}

ol li:before {
    content: counter(li)'.';
    counter-increment: li;
    position:absolute;
    right:100%;
    margin-right:10px;
    text-shadow:
      3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
     -1px 1px 0 #000,
      1px 1px 0 #000;
}
javc91
  • 56
  • 1