Insert div into a menu item before the link and more

I already asked this on https://wordpress.stackexchange.com/ but nobody replied. There are similar questions but I think they are intended for theme developers and not for someone who is simply using some theme and wants to extend a bit its functionality.

I make a web page in Wordpress using a certain theme. Now, this theme has an expected markup for the menus:

<ul id=”primary-navigation-main”>
    <li>
        <a href=”https://example.com/page1”>Page 1</a>
    </li>
    <li>
        <a href=”https://example.com/page1”>Page 2</a>
    </li>
    <li>
        <a href=”https://example.com/page1”>Page 3</a>
    </li>
</ul>

On the mobile menu the wishes are slightly different. In the company they want some transition while pressing on the menu item. Something that I solved at another (hardcoded) menu like that:

<ul id=”primary-navigation-main”>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example.com/page1”>
            <p>Page 1</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example.com/page1”>
            <p>Page 2</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example.com/page1”>
            <p>Page 3</p>
        </a>
    </li>
</ul>

or like in this jsfiddle.

I don’t know if this is the best solution for this transition but it works.

So, I would like to add <div> into <li> before <a> and in the <a> I would like to add <p>. I was fiddling with wp_nav_menu and wp_nav_menu_items but I wasn’t successful. Do I need to register <ul> or something else? Also it seems I will have to use a Walker class but I don't know how.

Now, beacuse I didn't get any response I already found a solution for the original theme's markup (without div and p). But still the question remains: how to insert an arbitrary markup into a certain existing menu (in my case the primary menu of the chosen theme). That is into each menu item li and then into each link a, preserving the menu's URLs.

Could anybody help me or simply tell me it's not possible? I could already used wp_nav_menu_items for inserting an item to the menu. Therefore I thought wp_nav_menu offers functionality for a bit more detailed work.

Add below code in your function file

class AWP_Menu_Walker extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth=0, $args=[], $id=0) {
        $output .= "<li class='" .  implode(" ", $item->classes) . "'>";
 
        $output .= '<div class="transition-div"></div>'; //Put your content here
        
        if ($item->url && $item->url != '#') {
            $output .= '<a href="' . $item->url . '">';
        } else {
            $output .= '<span>';
        }
 
        $output .= $item->title;
 
        if ($item->url && $item->url != '#') {
            $output .= '</a>';
        } else {
            $output .= '</span>';
        }
 
        if ($args->walker->has_children) {
            $output .= '<i class="caret fa fa-angle-down"></i>';
        }
    }
}

Add walker where you get menu in template (or header)

wp_nav_menu([
    ...
    ...
    'walker' => new AWP_Menu_Walker()
]);