Question 270894 in Html Question posted in
Some basic documentation can be found here.

Html – How to align listed bullet point text?

I have a bullet list with an image as the bullet point and have it coded like as shown in the snippet:

li::before {
  content: "";
  display: inline-block;
  height: 15px;
  width: 15px;
  background-size: contain;
  background-image: url('https://adp-com-prod.es.ad.adp.com/-/media/apps/wfn/images/rs_email_checklisticon-bullet.png?rev=f7aed74…&hash=2EB10B8B4C4FCB24BC37B1E501219BBB');
  background-repeat: no-repeat;
  margin-right: 7px;
  background-position: center center;
  vertical-align: middle;
}
ul {
  padding-left: 0;
  list-style: none;
}
       <ul class="voe-list">
                <li>
                  <strong>Simplicity.</strong> this is bullet number one with a longer sentence so it goes on the second line. Stay tuned for bullet number 2.
                </li>
                <li>
                  <strong>Compliance.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 3. 
                </li>
                <li>
                  <strong>Flexibility.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 4.
                </li>
              </ul>

As you can see each bullet copy is not aligned and the second line starts where the check mark starts. any way we can do it so it aligned with the first word of the first line? I could add padding-left or margin-left but wanted to see if there was another way.

In the default unordered list, it does align since the list-style lies in the tag (see screenshot)

enter image description here

Tags:

2

Answers


  1. 0

    If you add negative margin to counteract the margin you’ve added you get the desired result.

    (I added a bullet image from the web so you can see the list layout is working how you are intending)

    li::before {
  content: "";
  display: inline-block;
  height: 15px;
  width: 15px;
  background-size: contain;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAbFBMVEX///8AAAD4+PjV1dW8vLyrq6tJSUkxMTGMjIyCgoLf39+2traioqKJiYnw8PCurq4WFhZsbGyZmZnNzc1VVVXp6el0dHQ3NzdOTk5iYmLy8vIhISHIyMjj4+MZGRk+Pj4LCwspKSlaWlqVlZXFEyvtAAADlElEQVR4nO3diVrqMBAF4AaVRXBBAcENi+//jrfwXdHK0qSZ5EzH8z9BzgeFmTRLURARERERERERERERERERERERERFRp8zHw1W/v1wNx3P0UFLoTQbu29Okhx6QsN6N++3GVMbLg3xbV+hhyVkcDejc4BE9MiH9EwErGxO/OevTAbePI3p48WZnA1bG6BFGGjYFrP46LtCDjHHRHLAyvUWPs70nr4TOfaIH2tbYM6BzH5fosbYzaI62179Gj7YFv6dwb9G9Qu6wGm0wQY841EtoQle+oscc5DY4YGX5hh52gMDH8MuoO4/j8abJQ2f6qru2CV3Zkb6qfULnVp3oq1p/S3eG6OF7aPlLs6e/r2r1b/HTWn1fdR8b0U2f0RnOG0UndO4BHeKsR4GE7l51XxX/Nd3S3FddiSSs+iq9j6PMh+gU91UxZU3di9a+KmQeo4HSvupVLqHWvurMW4sWNPZV16IJVfZVU9mICvuquXBChX2VRHX6i7K+qiefUFtf9ZAgorK+Sqx2q9HUV/m/ggryrqivEqzdavT0VaK1W42avmqZLKKWvkq4dqtR0ldJ1241Mw19lXztVqOhrwp+HxwI31elqN1q8OsAk9RuNSv0P0ea2q0GXOQkqt1qwEsdywwRF9CE6Wq3H0bQiI1rTSVA+/+Utds36ExV0trtywaZMHHt9h/0rz/LhzhDJoxdnuEH+iSGL1dsATpHlWB6+NAamTBH6eYcslt8y5IQOQUXvU7KC7LHSN4I79wBExYfORIipzTsf4b2n0P7v6Vx64Z9If8P7dc0ZY6EyLrUfpd/auO6KGR/+JwjILTHz/IRIudp8jyFyG3TmxwBkfOlWSZpoHPevlvXY0DfW+Qo2LDvnjJMs2HfH06S5wO/A7b/Ht/jkJMo8LUYiXt7BetpktZrGtZE2V/XlvD9to61iSJbLY/Sch6K+TXC9td5vycJqGitfpJ6TdN+C/t7ZhKsndW178n+3jXz+w/t7yE1vw/Y/l5u8/vx7Z+pILbyQkePdMj+2Sbmz6exf8aQ/XOizJ/1Zf+8Nvtn7tk/N9H+2Zf2zy+1fwat/XOE7Z8FXZTB+bT2SKfYP5Pd/rn69u9GCPi/6Or9FvbvKPkD98zYvyvIY40CdBeWCPN3dv2Be9dOr4fqSo/kwfz9h0XRO/xJtXWHZWH/HtKd7V2yS7t3yRIRERERERERERERERERERERERFRiH8bizuFfRy8ewAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  margin-right: 7px;
  margin-left: -25px;
  background-position: center center;
  vertical-align: middle;
}
ul {
  padding-left: 0;
  list-style: none;
  margin-left: 25px;
}
    <ul class="voe-list">
                <li>
                  <strong>Simplicity.</strong> this is bullet number one with a longer sentence so it goes on the second line. Stay tuned for bullet number 2.
                </li>
                <li>
                  <strong>Compliance.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 3. 
                </li>
                <li>
                  <strong>Flexibility.</strong>this is bullet number one with a longer sentence so it goes on the second line.Stay tuned for bullet number 4.
                </li>
              </ul>
    Login or Signup to reply.
  2. 0

    I understand what you’re trying to do, but li::before is not how you change the bullet point. With what you have, all you’re doing is adding the image at the front of every <li>, so it actually is aligning correctly.

    To fix it, get rid of that li::before style entirely. You can change the bullet of a <ul> using the list-style property and url().

    ul {
  /* padding-left: 0; */
  /* list-style: none; */
  list-style: url('https://adp-com-prod.es.ad.adp.com/-/media/apps/wfn/images/rs_email_checklisticon-bullet.png?rev=f7aed74…&hash=2EB10B8B4C4FCB24BC37B1E501219BBB');
}

    Does that fix your problem?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search