Big/bold circular dot in CSS content

Question

I having a small problem in getting the right character for my CSS content element. What I wanted is dots under my heading, 3 dots to be specific and so I have the following CSS:

.dotted-effect::before{
    position: absolute;
    top: 80%;
    left: 50%;
    content: '.';
    font-size: 1.2em;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
    color: #444;
    text-shadow: 20px 0 #444, -20px 0 #444;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s; 
    transition:.3s;
}

The problem is in the way the CSS dot is displayed. Have a look at how it looks:

enter image description here

Notice how the dots look a bit squarish and tiny.

Now I'd like my dots to be circular and a bit bold: not ugly bold, but slightly bold.

I tried looking up Stack Overflow and a lot of people had the same problem:

This thread addresses my problem in a few ways. The problem is I am a bit specific about how I want my dots to be, and so I cannot settle for those tiny small dots. I also went through a lot of HTML ASCHII charts and none of them had what I was looking for.

What can I do next to achieve my goal?

Why use a character at all...why not use an background image or an icon-font? — Paulie_D, Mar 06 '15 at 09:52
@Paulie_D, Its a client request to use psedo elements , BTW , U mean background image in the content ?? (by content i mean inside psedo elements) — Alexander Solonik, Mar 06 '15 at 09:54
Yes, a bg image for the pseudo element or an icon font in the `content` property. — Paulie_D, Mar 06 '15 at 09:55
Also, "The problem is i am a bit specific about how i want my dots to be , and so i cannot settle for those tiny small dots"...you are...but is the client? — Paulie_D, Mar 06 '15 at 09:57
@Paulie_D , can try a BG image , but i really hate using images , and for icons , i tried font awesome , but they really dot have dots in them . — Alexander Solonik, Mar 06 '15 at 09:57
Why don't you increase the font size, if you want your dots to look bigger? Plus, I'd consider using middots. — user1438038, Mar 06 '15 at 09:57
You can make your own icon fonts...see [**icomoon.io**](https://icomoon.io/) — Paulie_D, Mar 06 '15 at 09:58
@Paulie_D , the Squarish dots u see are actually middots , also increaing font size only increases the ugliness of the middots and yes the client is specific about the dots . — Alexander Solonik, Mar 06 '15 at 09:58
Can you put together a JSFiddle to illustrate, please? You have lots of extra bits of CSS there that might be muddying the water. But my best initial guess: the font or the transformations are causing the squareness — gvee, Mar 06 '15 at 09:59
What about [U+2022](http://www.fileformat.info/info/unicode/char/2022/index.htm): • — Phylogenesis, Mar 06 '15 at 10:00
@Phylogenesis , RIGHT on the money !!! THAT WAS THE SOLUTION . please post it as an answer . — Alexander Solonik, Mar 06 '15 at 10:02
Also, I'd suggest using `letter-spacing` rather than `text-shadow`: http://jsbin.com/yozoposava/1/edit — Hashem Qolami, Mar 06 '15 at 10:05
@AlexanderSolonik 1. More flexibility: The space between dots (letters) can be changed easily. 2. In some web browsers you may find `text-shadow` a little pixelated/jagged. — Hashem Qolami, Mar 06 '15 at 10:13
@HashemQolami Thanks ! I still love ur thread about the image inlining , that was awesome ! Thank yoooou . — Alexander Solonik, Mar 06 '15 at 14:30

Denis · Answer 1 · 2015-11-19T21:04:19.920

How about background + border-radius?

http://jsfiddle.net/z7v6xk44/1/

<div class="dots"></div>


.dots, .dots:before, .dots:after {
    width: 4px;
    height: 4px;
    background: black;
    border-radius: 50%;
}
.dots{
    margin: 0 auto;
    position: relative;
    display: inline-block;
}
.dots:before {
    content: '';
    position: absolute;
    left: -10px;
}
.dots:after {
    content: '';
    position: absolute;
    right: -10px;
}

Big/bold circular dot in CSS content

1 Answers1