How to make 3 vertical dots using CSS?

I want to have 3 dots on my page to, for example, toggle the display of a contextual menu. How can I achieve this using CSS?


using an unicode char

.test:after {
  content: '\2807';
  font-size: 100px;
<div class="test"></div>

Try this complete source code for 3 dot menu:


<!DOCTYPE html>
            <title>Three Dot Menu</title>

            <script src=""></script>

                *{margin: 0;padding:0px}

                    width: 100%;
                    background-color: #0d77b6 !important;
                    height: 60px;

                    background-color: #0d77b6 !important;
                    border:1px solid #0d77b6 !important;
                    text-shadow: none !important;
                    color:#fff !important;

                .icons li {
                    background: none repeat scroll 0 0 #fff;
                    height: 7px;
                    width: 7px;
                    line-height: 0;
                    list-style: none outside none;
                    margin-right: 15px;
                    margin-top: 3px;
                    vertical-align: top;
                    pointer-events: none;

                .btn-left {
                    left: 0.4em;

                .btn-right {
                    right: 0.4em;

                .btn-left, .btn-right {
                    position: absolute;
                    top: 0.24em;

                .dropbtn {
                    background-color: #4CAF50;
                    position: fixed;
                    color: white;
                    font-size: 16px;
                    border: none;
                    cursor: pointer;

                .dropbtn:hover, .dropbtn:focus {
                    background-color: #3e8e41;

                .dropdown {
                    position: absolute;
                    display: inline-block;
                    right: 0.4em;

                .dropdown-content {
                    display: none;
                    position: relative;
                    margin-top: 60px;
                    background-color: #f9f9f9;
                    min-width: 160px;
                    overflow: auto;
                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                    z-index: 1;

                .dropdown-content a {
                    color: black;
                    padding: 12px 16px;
                    text-decoration: none;
                    display: block;

                .dropdown a:hover {background-color: #f1f1f1}

                .show {display:block;}

                function changeLanguage(language) {
                    var element = document.getElementById("url");
                    element.value = language;
                    element.innerHTML = language;

                function showDropdown() {

                // Close the dropdown if the user clicks outside of it
                window.onclick = function(event) {
                    if (!'.dropbtn')) {
                        var dropdowns = document.getElementsByClassName("dropdown-content");
                        var i;
                        for (i = 0; i < dropdowns.length; i++) {
                            var openDropdown = dropdowns[i];
                            if (openDropdown.classList.contains('show')) {
            <div class="header">

                <!-- three dot menu -->
                <div class="dropdown">
                    <!-- three dots -->
                    <ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()">
                    <!-- menu -->
                    <div id="myDropdown" class="dropdown-content">
                        <a href="#home">Home</a>
                        <a href="#about">About</a>
                        <a href="#contact">Contact</a>


If you are using font-awesome, it is as easy as including the .fa-ellipsis-v style. Further documentation is found here:

  1. With fontawesome.css

    <i class='fa fa-ellipsis-v'></i>
  2. With Glyphicons

    <span class="glyphicons glyphicons-option-vertical"></span>
  3. With css

    .textSpan:after {
     content: '\2807';
     font-size: 3em;
     color: #2e2e2e


<div class="dot"></div>


    width: 10px;
    height: 10px;
    background: red;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

<script> <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="stylesheet" href=""></link></script>

 <i class="fa fa-ellipsis-v col-2 mt-3 .text-light fa-lg" style={{"float":"right"}}></i>

This can be used to see three dots.This can be used in cards in react

Need Your Help

GROUP_CONCAT with limit

mysql group-concat

I have table with player-s in many-to-many relation with skill-s