How to indent the text in a custom unordered list


Tags: html,css,html-lists

Problem :

Fiddle: http://jsfiddle.net/pgf0ckfj/1/

CSS:

ul {
    list-style: none;
    padding: 0 0 0 45px;
}
ul li:before {
    content: "♦ ";
    color: #E55302;
}

As you can see the text is not indented like the normal UL.

How can I modify the CSS to ensure the text is indented for anything overflowing to the next line.



Solution :

Set the li to position: relative; and then your pseudo element to position: absolute; along with a negative left value. Adding relative positioning will make sure that your absolute positioned pseudo element will position itself based on the location and size of the li.

ul {
    list-style: none;
    padding: 0 0 0 45px;
}
ul li:before {
    content: "♦";
    color: #E55302;
    position: absolute;
    left: -15px;
}
li {
  position: relative;
  }
<ul>
	<li>This is the first entry but only goes one line</li>
	<li>This is the second entry but only goes one line</li>
	<li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
	<li>This is the fourth entry but only goes one line</li>
	<li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
</ul>


    CSS Howto..

    Using SASS how to prevent a css file from being generated inside of the SASS folder?

    CSS, Javascipt, HTML, how can i align a text inside a div to middle beside an image? and animate the text

    How do I implement search?

    How to make a double color single border using css?

    how to vertically align footer contents with css

    SMACSS and BEM: How to position Module inside of a Module?

    BackboneJS + HandlebarsJS - how to add image based on css

    How to count the number of correct answers using Javascript?

    CSS overflow : How to fix css overflow scroll bug

    How to change or remove quote symbol in css

    How to conditionally adjust paddings using css only?

    How to slide content opening up with jquery

    How To Create Full Screen Fixed With Scrolling Background Images

    PHP foreach, CSS and jQuery script.. How to interact?

    How to fix the Height for this area?

    How do I disable warnings from Aspx files (HTML,CSS)

    How do you create different CSS for dynamically generated elements?

    how to apply css class condtionally in angularjs

    how to change li last anchor color

    Css flex-box - How to align a single item to the bottom while keeping the other items to the top

    In CSS, how to scale multiple overlayed images responsively?

    How to create a list with 'pinned' items

    How to align social like buttons next to copyright text inside footer?

    How to position a html element under a fixed div

    how to CSS select all th cells, except the last one on IE7/8?

    How to remove blue border around the button in Firefox?

    How to set froala to calc height using css

    how do i css position this divs according to my layout picture?

    How to change background image based on screen size, possibly with Bootstrap

    How to put JavaScript from tutorial into my website?