how to make “before” li is fixed at the bottom of li?


Tags: html,css

Problem :

I want to put a small rectangle before the li tag, the rectangle should remain at the bottom of li and doesn't affect by the li inner html:

here is my code:

<ul class="leftlist">
   <li>LOWEST <b>PRICE</b></li>
   <li><b>WAITING</b> for solutions</li>
   <li>ASKS “WHAT’S IN IT FOR <b>mE?</b>”</li>
   <li>SEEKING more <b>stuff</b></li>
   <li><b>trusts</b> marketing messageson the front OF THE BOX</li>
   <li><b>passive</b> recipient ofbrand communications</li>
 </ul>

css:

.leftlist{

    list-style-type: none;
}

.leftlist li{

    border-bottom: 1px #621a4b solid;
    color: #621a4b;
    text-transform: uppercase;
    margin-bottom: 25px;

}

.leftlist li:before{

    content: "▄▄▄";
    color: #621a4b;
    position: relative;
    left: 1px;
    top: 1px;
    padding-right: 10px;
}

the ul have a specific width, so when if the li text is bigger than the width, the text line will break down and make the "before" behind the first text line and above the other lines, not at the bottom, here is how it looks like (see the fifth li): jsfiddle

so what I should do to make the "before" rectangle is always at the bottom of the li?



Solution :

https://jsfiddle.net/rL89L4uo/2/

.leftlist{

    list-style-type: none;
}

.leftlist li{
    padding-left:44px;
    border-bottom: 1px #621a4b solid;
    color: #621a4b;
    position:relative;
    text-transform: uppercase;
    margin-bottom: 25px;

}

.leftlist li:before{
    content: "";
    background: #621a4b;
    position: absolute;
    left: 0px;
    width:28px;
    height:9px;
    bottom:0px;
    padding-right: 10px;
}

    CSS Howto..

    How can I include a HTML-encoded “content:” character in CSS? [duplicate]

    How do you associate a css/sass stylesheet to a view in rails?

    How to bottom align a title of variable length

    How to programmatically apply CSS definitions to the whole page?

    How to style the ScrollBar using CSS or Javascript? [duplicate]

    How can I set a CSS property on the html element with jQuery?

    How to align two text boxes on same line with CSS

    How to revise the css transitions with a delay

    How do I style an upload input using CSS?

    how to get value from this html date-ranger?

    How to add a CSS class depending on URL path?

    How to vertically align lists when one li is a div

    How to make a css compatible by all browser

    How set the same height of divs

    How to position two
  • 's within a nested
      ?
  • how to solve IE6 box model problem without adding extra div and using Valid CSS?

    How to make a website to occupy the entire element?

    How to Pause ALL CSS animations?

    How to make sure the users see the new logo?

    How to see the print media CSS in Firebug?

    How to make CSS (or JS?) hideable help bar

    How to add style to android app

    How is it that CSS borders create a triangle?

    How do I split a WordPress theme into 2 columns?

    How to add separate style to google.visualization.DataTable without changing its own styles

    How to toggle two buttons on mouse hover?

    How to include css in my JSP?

    How to apply css styles in embed widget

    simple css issue - how to change anchor inside li if li:hover

    how to colour user selected option using CSS in Firefox