::after behaviour with lib-css

Question

Trying to get to know how less work or better lib-css in partnership with it.

I have all styles generated on different element ending with :after going down to the same line of the _icon.less that generate the icon,

Now if I want to take the icon off just to a single div element how do I do?

Example:

@media all {
    .page-header .switcher .options .action.toggle::after, .page-footer .switcher .options .action.toggle::after {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 12px;
        line-height: 22px;
        color: inherit;
        content: '\e622';
        font-family: 'luma-icons-entended';
        margin: 0;
        vertical-align: top;
        display: inline-block;
        font-weight: normal;
        overflow: hidden;
        speak: none;
        text-align: center;
    }
}

seems generated by _module.less on line 270

    .page-header,
    .page-footer {
.switcher {
                font-size: 12px;
                .options {
                    .lib-dropdown(
                    @_dropdown-actions-padding: 0,
                    @_dropdown-list-item-padding: 0,
                    @_dropdown-toggle-icon-content: @icon-down,
                    @_dropdown-toggle-active-icon-content: @icon-up,
                    @_icon-font-text-hide: true,
                    @_icon-font-size: 12px,
                    @_icon-font-line-height: 22px,
                    @_dropdown-list-min-width: 100px
                    );

                    ul.dropdown {
                        a {
                            .lib-link(
                            @_link-color: @color-gray20,
                            @_link-text-decoration: none,
                            @_link-color-visited: @color-gray20,
                            @_link-text-decoration-visited: none,
                            @_link-color-hover: @color-gray20,
                            @_link-text-decoration-hover: none,
                            @_link-color-active: @color-gray20,
                            @_link-text-decoration-active: none
                            );
                            display: block;
                            padding: 8px;
                        }
                    }




                }

and _icon.less on line 80

&:after {
    ._lib-icon-font(
        @_icon-font-content,
        @_icon-font,
        @_icon-font-size,
        @_icon-font-line-height,
        @_icon-font-color,
        @_icon-font-margin,
        @_icon-font-vertical-align
    );
}

but this last one seems to generate a lot of :after to different div element so eliminate this means eliminate all other :after connected to it trough different div

How do I do so to display:none just on 1 single div, in this case

.page-header .switcher .options .action.toggle:hover::after, .page-footer .switcher .options .action.toggle:after

Answer 1

It required a little bit of practice and intuition, but then I understood is always the element :after belong to, the less regarding this element will have a .lib-icon-font class that connect to ._lib-icon-font in _icon.less, so eliminating the former will take away the icon.

In this particular case it would be even more intuitive so the less class will be connected to main div and this will generate all style for all div contained by it and the dropdwon as well, even the :after in this case, the icon will be generated by

@_dropdown-toggle-icon-content: @icon-down,
@_dropdown-toggle-active-icon-content: @icon-up,