Guillaume F. Guillaume F. - 4 months ago 11
HTML Question

Include the CSS bullet along the <LI> tag

I did a fiddle to showcase the issue: https://jsfiddle.net/1xum5Lce/4/

The HTML:

<ul class="font anim">
<li class="bckA">Hello</li>
<li class="bckB">World</li>
</ul>


The CSS:

.bckA {
background-color: #FFFFAA;
}

.bckB {
background-color: #AAFFFF;
}

.anim li {
transition: all 200ms;
transform-origin: left;
}

.anim li:hover {
transform: scale(1.5);
box-shadow: 0px 0px 10px #000000;
}

.font {
font-size: 36px;
display: list-item;
list-style-type: decimal;
}


The background color and the shadow when hovering are only covering the label, and the transform-origin is between the bullet and the label.

I need the bullet to be included in all this.

Note that I don't want to add the numbering manually since the
<LI>
tags change their order dynamically. Also, physically setting the bullet inside doesn't handle the margin correctly during line-wraps.

What is the best approach to do this?

Answer

You can use CSS counters instead of list-style-type: decimal. This way, you also have the possibility to style the numbers different than the rest of the listitem.

.bckA { background-color: #FFFFAA; }
.bckB { background-color: #AAFFFF; }

.anim li {
  counter-increment: number;
  position: relative;
  padding-left: 40px;
  transition: all 200ms;
  transform-origin: left;
}

.anim li::before {
  background: rgba(0, 0, 0, 0.15);
  content: counter(number) ". ";
  display: block;
  height: 100%;
  padding-right: 5px;
  position: absolute;
  left: 0;
  text-align: right;
  width: 35px;
}

.anim li:hover {
  transform: scale(1.5);
  z-index: 2;
}

.font {
  font-size: 36px;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
<ul class="font anim">
  <li class="bckA">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</li>
  <li class="bckB">World</li>
</ul>

Edit: To align text after a line-break, we'll give the counter a fixed width and let it stick to the left with position: absolute (don't forget to add position: relative and z-index to the listitem).

height isn't necessary for ::before but it shows how it actually works.

Comments