CODEWITHSUNDEEP
htmlcss
Mohammad
Mohammad

Reputation: 3547

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

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?

Upvotes: 1

Views: 518

Answers (3)

Aminesrine
Aminesrine

Reputation: 2140

Try this

Add position: relative to the li, and apply this style to the li:before:

.leftlist li:before {
content: "▄▄▄";
color: #621a4b;
position: absolute;
height: 9px;
bottom: 0;
}

Upvotes: 0

Mark
Mark

Reputation: 3272

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;
}

Upvotes: 1

m4n0
m4n0

Reputation: 32285

You need to use position: absolute on the pseudo element and position: relative on the parent element li so that absolute positioning is done only within list item li. Adjust the top value after that.

Updated JSfiddle

.leftlist {
  list-style-type: none;
}
.leftlist li {
  border-bottom: 1px solid #621a4b;
  color: #621a4b;
  margin-bottom: 25px;
  position: relative; /* Add */
  text-transform: uppercase;
}
.leftlist li::before {
  color: #621a4b;
  content: "▄▄▄";
  left: 1px;
  padding-right: 10px;
  position: absolute; /* Modify */
  top: 10px; /* Modify */
}
<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>

Upvotes: 1

Related Questions