Dots between navbar li

Question

I am trying to add three dots between the bootstrap 4 navbar

elements. In order to do this I tried the li:before statement but the dots appear only in the upper right corner instead of between the li elements. What I am doing wrong here - it makes me crazy ;-)

My CSS is like this:

body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

li:before {
  content: '•••';
  position: absolute;
  right: 1px;
  top: 0px;
  color: aqua;
}

And the HTML is just from the simple bootstrap example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>Fixed top navbar example for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="navbar-top-fixed.css" rel="stylesheet">
  </head>

  <body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Fixed navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" 
        aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
  </body>

</html>

You need `position: relative;` on the `li`, or else the pseudo will relate to the next non-static positioned element, and if none, to the viewport. — Asons, Oct 28 '18 at 10:00
@LGSon: This worked great - I just missed the relative part on the position! Thanks — Franz Gsell, Nov 01 '18 at 17:31

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Have a look at CSS position, and particularly this bit:

absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout.

It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

Its final position is determined by the values of top, right, bottom, and left.

You want your li:before to be absolutely positioned relative to it's parent li. Therefore you should give your li a position: relative.

body {
  min-height: 75rem;
  padding-top: 4.5rem;
}


li {
position: relative;}

li:before {
  content: '•••';
  position: absolute;
  right: 1px;
  top: 0px;
  color: aqua;
}

/* only for debugging */
#navbarCollapse {
    display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

    
      <body>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
          <a class="navbar-brand" href="#">Fixed navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" 
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
      </body>

Let me know if you need any more help with this. – ksav Nov 05 '18 at 22:48 — ksav, Nov 05 '18 at 22:48

Dots between navbar li

1 Answers1