skip to Main Content

I have an extra bullet showing up after my UL ends.

<ul> 
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text
    <ul>
      <li>Text</li>
      <li>Text</li>
    </ul>
  </li>
</ul>

I’ve tried several solutions that have not resolved the issue.

2

Answers


  1. As checked, this code is working as expected in my instance.
    Please check if you have other codes being linked in your email content.

    <ul> 
      <li>Text</li>
      <li>Text</li>
      <li>Text</li>
      <li>Text</li>
      <li>Text
        <ul>
          <li>Text</li>
          <li>Text</li>
        </ul>
      </li>
    </ul>
    

    5 "Text" value as in "Bold Circle Bullet"
    2 "Text" value as in "Empty Circle Bullet"

    Login or Signup to reply.
  2. It’s possible that the extra bullet you’re seeing after your <ul> ends is caused by a CSS styling issue. Specifically, if your <ul> element has a display: list-item; or display: inherit; style, it may cause an extra bullet to appear.

    One way to fix this issue is to add a style to your CSS that sets the display property of all <ul> elements to block.

    For example:

    ul {
      display: block;
    }
    

    Also, you can add a class if you want to apply it to only a specific <ul> element.

    For example:

    ul.remove-duplicated-circle {
      display: block;
    }
    

    And your list would be as following:

    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text
            <ul class="remove-duplicated-circle">
                <li>Text</li>
                <li>Text</li>
            </ul>
        </li>
    </ul>
    

    This should remove the extra bullet that’s appearing after your <ul> ends. If this doesn’t solve the problem, you may need to provide more information about your CSS and HTML code.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search