Как сделать border выступающий за груницу

Question

Всем привет, как можно сделать вот такую красную границу, при активной кнопке, которая выступает за груницу navbar`а

Код заготовки:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

:root {
  --first-color: #303030;
  --second-color: #272727;
  --third-color: #EF4B4C;
}

body {
  background-color: var(--first-color);
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 350px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: var(--second-color);
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: show;
}

.sidenav .email {
  margin-top: 35px;
  color: #fff;
  font-size: 24px;
}

.tab {
  margin: 30px 0 0 auto;
  padding: 0;
  list-style-type: none;
  font-weight: 500;
  text-decoration: none;
  position: relative;
}

.tab button {
  margin: 0;
  padding: 0;
  height: 60px;
  width: 350px;
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 16px;
  color: #ddd;
  font-size: 24px;
}

.elem button.active {
  background-color: #2D2D2D;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="sidenav">
    <ul class="tab">
      <li class="elem"><button class="tablinks" onclick="openCity(event, 'Files')" id="defaultOpen">О проекте</button></li>
      <li class="elem"><button class="tablinks" onclick="openCity(event, 'Article')">Регистрация</button></li>
      <li class="elem"><button class="tablinks" onclick="openCity(event, 'Rules')">Правила</button></li>
      <li class="elem"><button class="tablinks" onclick="openCity(event, 'Registration')">Статьи</button></li>
      <li class="elem"><button class="tablinks" onclick="openCity(event, 'Support')">Файлы</button></li>
    </ul>
  </div>
  <div id="Files" class="tabcontent">
    <h3>Files</h3>
  </div>
  <div id="Article" class="tabcontent">
    <h3>Article</h3>
  </div>
  <div id="Rules" class="tabcontent">
    <h3>Rules</h3>
  </div>
  <div id="Registration" class="tabcontent">
    <h3>Registration</h3>
  </div>
  <div id="Support" class="tabcontent">
    <h3>Support</h3>
  </div>
</body>

</html>

Answer 1

Пример

body {
  background-color: #303030;
  margin: 0;
}

.nav {
  background-color: #272727;
  min-height: 100vh;
  width: 300px;
  display: flex;
  align-items: center;
}

.nav__list {
  margin: 0;
  list-style: none;
  padding-left: 0;
  width: 100%;
}

.nav__link {
  display: block;
  padding: .75rem 1rem;
  text-align: center;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
}

.nav__link:hover {
  background-color: #2D2D2D;
}

.nav__link:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: .25rem;
  height: 100%;
  background-color: #EF4B4C;
  border-radius: 0 .75rem .75rem 0;
}

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item"><a href="#" class="nav__link">Link 1</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Link 2</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Link 3</a></li>
  </ul>
</nav>

Answer 2

Попробуйте свойство overflow: show

body {
  background: #444;
}  
.navbar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
  height: 100%;
  overflow: show;
  background: #222;
}
.nav_item {
  display: inline-block;
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  color: white;
}
.nav_item:active {
  background: #444;
  border-right: 5px solid #e32;
  border-radius: 0 0.5rem 0.5rem 0;
}

<div class="navbar">
  <span class="nav_item">О проекте</span>
  <span class="nav_item">Регистрация</span>
  <span class="nav_item">Правила</span>
  <span class="nav_item">Статьи</span>
  <span class="nav_item">Файлы</span>
</div>

БЛОГ НА HUSL

Как сделать border выступающий за груницу

Ответы (2 шт):