Text-shadow or similar effect to a <ul> bullet?

Asked 21/12, 2012 at 22:30 Answered 8/4, 2013 at 22:1

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.

Making answered 21/12, 2012 at 22:30 Comment(0)

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/

Nauplius answered 21/12, 2012 at 22:41 Comment(8)

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? – Making 21/12, 2012 at 23:0

yes, this should be tricky one. I did just quick copy paste, you probably could look for text symbols – Nauplius 21/12, 2012 at 23:11

okay not such a disaster at all, there is another interested related article alanhogan.com/tips/css/special-characters-in-generated-content – Nauplius 21/12, 2012 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 – Making 21/12, 2012 at 23:28

@ejfrancis, this is strange, it works both on me. Actually it suppose to be '\2022' no letter u only numbers – Nauplius 21/12, 2012 at 23:31

bw what browser you testing on caniuse.com/css-textshadow make sure it supports text-shadow – Nauplius 21/12, 2012 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! – Making 21/12, 2012 at 23:35

yep, you are welcome, my peasure, if any chance to accept answer? that makes me even happier:) – Nauplius 21/12, 2012 at 23:38

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.

Presumptuous answered 21/12, 2012 at 22:42 Comment(0)

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>

Qktp answered 8/4, 2013 at 22:1 Comment(0)

Recommended topics

Hot tags