10

As the title says, I'm trying to find a way to add a text-shadow effect for a bullet. I'm using text-shadow to show a light glow behind some text, and I'd like to accomplish this same effect for bullets without having to create my own bullet image.

javac
  • 2,431
  • 4
  • 17
  • 26
ejfrancis
  • 2,925
  • 4
  • 26
  • 42

3 Answers3

15

try this

ul {
  list-style: none;
}

li:before {
  content: '\2022';
  padding: 10px;
  text-shadow: 1px 1px 2px red;
}

http://jsbin.com/apoviv/2/edit

UPD: You really can use unicode charachtest for special symbols this is quite tricky but there is good article which can help http://css-tricks.com/css-content/

dmi3y
  • 3,482
  • 2
  • 21
  • 32
  • this creates a shadow, but instead of the bullet i get a question mark block. is there another syntax or declaration for that simple bullet? – ejfrancis Dec 21 '12 at 23:00
  • yes, this should be tricky one. I did just quick copy paste, you probably could look for `text symbols` – dmi3y Dec 21 '12 at 23:11
  • okay not such a disaster at all, there is another interested related article http://alanhogan.com/tips/css/special-characters-in-generated-content – dmi3y Dec 21 '12 at 23:20
  • well, It doesn't seem to work with the hex for a bullet. im trying content: "\u2022"; . Also, I tried it with the symbol from the example, and it did work but the symbol did not have a text-shadow applied to it – ejfrancis Dec 21 '12 at 23:28
  • @ejfrancis, this is strange, it works both on me. Actually it suppose to be `'\2022'` no letter `u` only numbers – dmi3y Dec 21 '12 at 23:31
  • bw what browser you testing on http://caniuse.com/css-textshadow make sure it supports `text-shadow` – dmi3y Dec 21 '12 at 23:34
  • got it! the symbol wasn't shadowed because I was overwriting that css rule later on by accident. thanks for the help! – ejfrancis Dec 21 '12 at 23:35
  • yep, you are welcome, my peasure, if any chance to accept answer? that makes me even happier:) – dmi3y Dec 21 '12 at 23:38
2

Your best bet would be to use pseudo-element to insert a bullet and a bullet symbol (• or any other that would fit you). Since it would be a textual content, the text-shadow would work perfectly on it

Here is an example — http://dabblet.com/gist/4356335 — with a bit of extra styles to make the inserted bullet work.

kizu
  • 42,604
  • 4
  • 68
  • 95
2

Another option would be to to use pure CSS bullets. Something like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>CSS Bullets</title>
        <style type="text/css" media="screen">

            html, body {
            font-size: 16px; 
        }

        article ul li {
            position:relative;
            overflow:hidden;
            list-style:none;
            padding-left:20px;
            line-height: 1.35em;
            margin: 0 0 .5em 0;
        }

        article li:before {
            margin:-8px 0 0;
            background:#ededed;
            overflow:hidden;
            list-style:none;
            content:"";
            position:absolute;
            top:0.95em;
            left:0;
            width:7px;
            height:7px;
            border-radius:2px;
            -webkit-border-radius:2px;
            -moz-border-radius:2px;
            box-shadow: 1px 1px 5px #888888;
        }
        </style>
    </head>
<body>
    <article>
        <ul>
            <li>Bullet 1</li>
            <li>Bullet 2</li>
            <li>Bullet 3</li>
        </ul>
    </article>
</body>
</html>
Jeff Rogers
  • 21
  • 1