How can I add a whitespace in between my element and psuedo element?


Tags: html,css

Problem :

I'm using the ::before selector to add an image before each list item in my menu, and I just want to add a blank space in between the image and the text. here is the markup

<ul>
   <li>menu 1</li>
   <li>menu 2</li>
   <li>menu 3</li>
</ul>

& the CSS

&::before {
        content: url("plus.png");
    }

I've tried

  &::before {
        content: url("plus.png") + "\00a0";
    }

And

&::before {
        content: url("plus.png" + "\00a0" );
    }

Any ideas of how to accomplish this? Thanks!



Solution :

&::before {
    content: url("plus.png");
    margin-right: 10px;
}

<ul>
     <li>menu 1</li>
     <li>menu 2</li>
     <li>menu 3</li>
</ul>

Using the margin command makes whitespace around the element.


    CSS Howto..

    attaching div to a specific element for showing with javascript

    DotNetNuke Skinning: How do I use\add skin.css?

    How to add hover effect to menu using jQuery

    How to show Bootstrap 3 popover scroll only when needed

    How can a site Use Javascript and NOT display any structural HTML in the browser?

    how to show button and images in one line using css

    CSS: How do I 'raise' the last photo in this page?

    how to solve slideshow css problem?

    How hard is it to master semantic markup and good CSS?

    javafx ImageView how to use css hover

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver

    How can I style html/form elements using CSS?

    How to create border corner spacing in CSS

    Yahoo news CSS, how to achieve behavior

    css and basket: how to do an “always visible” basket?

    How can i add arrow to image

    This footer stays put in Chrome, how can I make it stay the same in Firefox

    CSS: how to enforce word wrap on an odd situation?

    How do I wrap several buttons inside a TD element

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How do I center content and extend the background color to 100% of the page?

    How can I make a full width videojs v5 progress bar?

    How to create a dotted shadowy effect on an image with CSS?

    How to remove inline css with jQuery onClick [closed]

    How can I change the content of