title: Twitter Bootstrap navbar hover effect - transition border expand from center
body: <p>How can I make this transition start moving from the center of the element?</p>
  
  <p>This is my CSS:</p>
  
  <pre><code>/* Navbar */
  .navbar-fixed-top{
      top: 80px;
  }
  .navbar-default{ /* assigning the top bar to the entire navbar div element */
      background-color: #4F4F4F;
  }
  nav.navbar {  box-shadow: 0 0 2px 0 #ccc; }
  nav.navbar a { color: #FF7D36; }
  nav.navbar ul.navbar-nav a { color: #FF7D36; border-style: solid; border-width: 0 0 2px 0; border-color: #000; }
  nav.navbar ul.navbar-nav a:hover,
  nav.navbar ul.navbar-nav a:visited,
  nav.navbar ul.navbar-nav a:focus,
  nav.navbar ul.navbar-nav a:active { background: #000; }
  nav.navbar ul.navbar-nav a:hover
  {
      border-color: #FF7D36;
      transition: border 0.5s ease-in-out;
  }
  </code></pre>
  
  <p>The transition is working fine, but I want that the border expand from the center to left and right...
  Thanks!</p>
  
  <blockquote>
    <p>EDIT: The transition works now, but I use the twitter bootstrap
    navbar... and when I use a small device and the links are now
    vertically positioned, there is no padding-left in the a element,
    because it is positioning absolute... hope you understand. (so I have
    no distance between the left browser side and the a element)</p>
  </blockquote>
  
  <p>See here my working example (when you resize the browser for mobile devices, you can see that there is no distance any longer)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Navbar */
  .navbar-fixed-top{
      top: 80px;
  }
  .navbar-default{ /* assigning the top bar to the entire navbar div element */
      background-color: #4F4F4F;
  }
  nav.navbar {
      box-shadow: 0 0 2px 0 #ccc;
  }
  nav.navbar a {
      color: #FF7D36;
  }
  nav.navbar ul.navbar-nav a {
      color: #FF7D36;
      border-style: solid;
      border-width: 0 0 2px 0;
      border-color: #000;
  }
  nav.navbar ul.navbar-nav a:hover,
  nav.navbar ul.navbar-nav a:visited,
  nav.navbar ul.navbar-nav a:focus,
  nav.navbar ul.navbar-nav a:active {
      background: #000;
  }
  
  nav.navbar ul.navbar-nav a {
      text-decoration: none;
      position: relative;
      display: inline-block;
  }
  nav.navbar ul.navbar-nav a::after {
      content: '';
      width: 100%;
      position: absolute;
      top: 100%;
      left: 0;
      height: 2px;
      background-color: #FF7D36;
      transform: scaleX(0);
      transition: transform .35s ease;
  }
  nav.navbar ul.navbar-nav a:hover::after {
      transform: scaleX(1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Basic Bootstrap Template&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;!-- Optional Bootstrap theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Navigation ein-/ausblenden&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;Projekt-Titel&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="collapse navbar-collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Start&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#ueber"&gt;Über&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#kontakt"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;                                  </code></pre>
  </div>
  </div>
  </p>