CODEWITHSUNDEEP
htmlcss
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29189

css: three horizontal dots using :before and :after

I want to show three horizontal dots (I've made a demo on jsfiddle)

span {
    position: relative;
    background-color: blue;
    border-radius: 5px;
    font-size: 0;
    margin-left: 20px;
    padding: 5px;
}

span:before {
    position: absolute;
    left: -10px;
    content: '';

    background-color: green;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;

    padding: 5px;
}

span:after {
    position: absolute;
    right: 0;
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;

    padding: 5px;
}

I don't know if this is the best way to achieve this. Also, I want them to line-up horizontally. And I don't understand why they aren't. Any suggestion how to fix this ?

Upvotes: 0

Views: 6490

Answers (3)

Jaykumar Patel
Jaykumar Patel

Reputation: 27624

Check this jsFiddle

HTML

<span></span>

CSS

span { position: relative; background-color: blue; border-radius: 5px; font-size: 0; margin-left: 20px; padding: 5px; }

span:before {
    position: absolute;
    left: -20px;
    top: 0;
    content: '';

    background-color: green;
    border-radius: 5px;
    font-size: 0;
    padding: 5px;
}

span:after {
    position: absolute;
    left: 20px;
    top: 0;
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;    
    padding: 5px;
}

Upvotes: 1

user3240923
user3240923

Reputation: 39

//using left instead of right in after

span {
    position: relative;
    background-color: blue;
    border-radius: 5px;
    font-size: 0;
    margin-left: 20px;
    padding: 5px;
}

span:before {
    position: absolute;
    left: -10px;
    content: '';
    top: 0;
    background-color: green;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;

    padding: 5px;
}

span:after {
    position: absolute;
    left: 10px; //using left instead of right
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;
    top: 0;

    padding: 5px;
}

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99554

Since you are using absolute positioning, you could use top property to position the pseudo generated contents vertically, and play with left property for horizontal alignment

Example Here

span:before {
    position: absolute;
    left: -20px; /* <-- align the circle horizontally */
    top: 0;      /* <-- Added declaration             */
    content: '';

    background-color: green;
    border-radius: 5px;
    font-size: 0;
    padding: 5px;
}

span:after {
    position: absolute;
    left: 20px; /* <-- align the circle horizontally */
    top: 0;     /* <-- Added declaration             */
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;    
    padding: 5px;
}

In this case there's no need to use margin of the pseudo-elements.

Additionally, you could avoid negative values for left property to make the circles appear in the right. (Example Here).

Upvotes: 3

Related Questions