0

I want a button, and I want it like this:

Icon

So I begun coding it:

.IconBasic {
    width: 30px;
    height: 30px;
    border: 1px solid #000000;
    border-radius: 50%;
    cursor: pointer;
    background-color: white;
}

.IconBasic:before, .IconBasic:after {
    content: "";
    position: absolute;
    background: #000000;
}

.IconBasic:before {
    transform: translate(-210%, -50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
}

.IconBasic:after {
    transform: translate(110%, -50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
}
<button class="IconBasic"></button>

For some reasons I don't want to add more html; I would like to to this only with css. Does anyone know it is this possible?

Edit: I know about Can I have multiple :before pseudo-elements for the same element?, but this is not this case. I know that you can not add more pseudoelements, but there are other ways, and this question is about this problem.

  • [Use `box-shadow` instead](http://one-div.com/pictos/3dots/). – Sebastian Simon Nov 13 '17 at 19:14
  • Good idea, thanks! –  Nov 13 '17 at 19:17
  • i was about to give you an answer, but it was closed :s – Temani Afif Nov 13 '17 at 19:17
  • Yeah, the managers don't read the questions, only its headers… ¯\_(ツ)_/¯ –  Nov 13 '17 at 19:18
  • 1
    then rephrase the title question , so it reflects at best the real question ;) ... cause a third pseudo leads to the duplicate ;), a single pseudo with box shadow or font-size + letter spacing will do the job by the way ;= – G-Cyrillus Nov 13 '17 at 19:21
  • Yeah, I just edited it! –  Nov 13 '17 at 19:23
  • an example with a single pseudo https://codepen.io/anon/pen/VrWpax – G-Cyrillus Nov 13 '17 at 19:28
  • 1
    @NikitaSöze There are no “managers” here. The user who closed your question has the [`css` gold badge](https://stackoverflow.com/help/badges/247/css). Your question still pretty much sounds like _“Is it possible to add a third pseudo-class to an element?”_, even after your edit. You can still share your research and explain that you know about that other question (the duplicate target) and explain why it doesn’t answer your question. – Sebastian Simon Nov 13 '17 at 19:28
  • Thank you Xufox! Ok, then I will change the header and add the reference of the other question –  Nov 13 '17 at 21:21

0 Answers0