title: How to change the width of the menu's right border when selected in ant design
body: <p>I tried to find the css code in <code>antd.css</code> to change the border width and border color but all I found was this one but when I place it inside my App.css the border on the right just disappears</p>
  <pre><code>.ant-menu-vertical .ant-menu-item::after,
  .ant-menu-vertical-left .ant-menu-item::after,
  .ant-menu-vertical-right .ant-menu-item::after,
  .ant-menu-inline .ant-menu-item::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-right: 6px solid red;
    transform: scaleY(0.0001);
    opacity: 0;
    transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
    content: '';
  }
  </code></pre>
  <p>This is the AdminPage.js</p>
  <pre><code>import React from 'react'
  import { Image, Layout, Menu } from 'antd';
  import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
  } from '@ant-design/icons';
  
  const { Header, Sider, Content } = Layout;
  
  class AdminPage extends React.Component {
    state = {
      collapsed: false,
    };
  
    toggle = () =&gt; {
      this.setState({
        collapsed: !this.state.collapsed,
      });
    };
  
    render() {
      return (
        &lt;Layout className=&quot;full-screen&quot;&gt;
          &lt;Sider className='light-bg' trigger={null} collapsible collapsed={this.state.collapsed}&gt;
              &lt;div className='logo'&gt;
                  &lt;Image src='./logo.png' /&gt;
              &lt;/div&gt;
              &lt;Menu
                  activeClassName='menu-fix'
                  theme=&quot;light&quot;
                  mode=&quot;inline&quot;
                  defaultSelectedKeys={['1']}
                  items={[
                  {
                      key: '1',
                      icon: &lt;UserOutlined /&gt;,
                      label: 'nav 1',
                  },
                  {
                      key: '2',
                      icon: &lt;VideoCameraOutlined /&gt;,
                      label: 'nav 2',
                  },
                  {
                      key: '3',
                      icon: &lt;UploadOutlined /&gt;,
                      label: 'nav 3',
                  },
                  ]}
              /&gt;
          &lt;/Sider&gt;
          &lt;Layout className=&quot;site-layout&quot;&gt;
            &lt;Header className=&quot;site-layout-background&quot; style={{ padding: 0 }}&gt;
              {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: this.toggle,
              })}
            &lt;/Header&gt;
            &lt;Content
              className=&quot;site-layout-background&quot;
              style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
              }}
            &gt;
              Content
            &lt;/Content&gt;
          &lt;/Layout&gt;
        &lt;/Layout&gt;
      );
    }
  }
  
  export default AdminPage;
  </code></pre>
  <p>this is my App.css</p>
  <pre><code>.trigger {
      padding: 0 24px;
      font-size: 18px;
      line-height: 64px;
      cursor: pointer;
      transition: color 0.3s;
    }
    
  .trigger:hover {
      color: #1890ff;
    }
  
  .light-bg {
      background-color: #fff;
      width: 600px;
  }
  
  .menu-fix {
      color: blue;
  }
  
  .ant-menu &gt; .ant-menu-item:hover,
  .ant-menu &gt; .ant-menu-submenu:hover,
  .ant-menu &gt; .ant-menu-item-active,
  .ant-menu &gt; .ant-menu-submenu-active,
  .ant-menu &gt; .ant-menu-item-open,
  .ant-menu &gt; .ant-menu-submenu-open,
  .ant-menu &gt; .ant-menu-item-selected,
  .ant-menu &gt; .ant-menu-submenu-selected {
    color: #0000DB;
  }
  
  .ant-menu-vertical .ant-menu-item::after,
  .ant-menu-vertical-left .ant-menu-item::after,
  .ant-menu-vertical-right .ant-menu-item::after,
  .ant-menu-inline .ant-menu-item::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-right: 6px solid red;
    transform: scaleY(0.0001);
    opacity: 0;
    transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
    content: '';
  }
  
  .logo {
      margin:16px;
  }
  
  .site-layout .site-layout-background {
  background: #fff;
  }
  
  .full-screen {
      min-height: 100vh;
  }
  </code></pre>
  <p>I'm trying to change the color and the width of the blue border on the right as you can see in this image <a href="https://i.stack.imgur.com/cEveH.png" rel="nofollow noreferrer">Antd menu item</a></p>