No replies
lemx
lemx's picture
Offline
newbie
Last seen: 20 weeks 20 hours ago
Joined: 2020-03-23
Posts: 1
Points: 2

I have a menu item in a sub-menu of my web browser's top menu that does not have a text display for the keyboard shortcut associated with that menu item. I therefore wanted to add the keyboard shortcut text myself (so that it displays next to the menu title, as it does for other menu items).

I tried using the following:

#menuPopup #menu_capture[label="Capture"]::after {
content: "Ctrl+Shift+#"; color: graytext !important; position: relative; right: -56px !important;
}


It works, and the desired hotkey text now appears next to the menu title (correctly horizontally aligned, once I've added 'position: relative; right: -56px') just as it does for other menu items.

The problem is that the menu entry is now almost double the height of the other menu entries, and there's also scroll arrows at the top and bottom of the menu (even though there is no need for them).

How do I correctly use ::after to ensure that the menu entry with the added hotkey text remains the same height as the others? I tried setting height, max-height, reducing padding and margins, but they did nothing.