How do I make the buttons in the Webflow side menu extend all the way while maintaining the blue line on the far right border when hovered and selected?

To achieve this effect in the Webflow side menu, you'll need to use a combination of CSS styling and interactions. Here's a step-by-step guide on how to make the buttons extend while maintaining the blue line on the far right border:

1. Structure your side menu:
- Create a container div for your side menu.
- Inside the container, create a div for each menu item button.
- Apply a class to each menu item div.

2. Styling the menu item buttons:
- Select your menu item div class and apply the desired background color for the buttons.
- Set the width of the buttons to the desired initial width.

3. Add a hover effect:
- Go to the Hover state of your menu item div class.
- Increase the width of the button to the desired expanded width to make it extend.
- To maintain the blue line on the far right border, you'll need to add a pseudo-element like `::after` to your button element.

4. Styling the pseudo-element:
- Apply the pseudo-element `::after` to your menu item div class.
- Set the width of the pseudo-element to the desired width.
- Position the pseudo-element absolutely relative to its parent div.
- Set the background color to the desired blue color.
- Adjust the top, right, and bottom properties to position the pseudo-element in the desired location, e.g., `top: 0; right: -5px; bottom: 0;` to cover the right border.

5. Add a transition effect:
- Go back to the normal state of your menu item div class.
- Add a `transition` property to your menu item and pseudo-element to create a smooth transition effect when the width changes.

6. Final touches:
- Apply any additional styling, such as typography or padding, to your menu item buttons to suit your design.

Remember to preview and test your side menu to ensure the desired effect is achieved. Feel free to adjust the values and styling properties to match your specific design preferences.