I am using HTML to represent status of request in graphical format and sending this via email – HTML is called via Python code. HTML output is similar to the image – I faced the challenge of last message got truncated. So introduced some ‘dummy’ – so that one element will be added at the last and data truncation can be avoided – it worked and I made the last element invisible by giving background color as white. But unable to make the connecting line to the last element color to white. I have used almost all the options of li.active::before, ul.active::before, nth-last-child, nth-last-type, last-child. But it is not working. Please help.
enter image description here
ul { text-align: justify; position: relative; overflow: hidden; } ul:before, .active:after { content: ' '; width: 100%; border: 2px solid #34ae25; position: absolute; top: 1em; margin-top: 18px; z-index: -1; } .active:after { border-color: #b7b7b7; } ul:after { content: ""; display: inline-block; width: 100%; } li { width: 2em; height: 2em; text-align: center; line-height: 2em; border-radius: 50%; background: #1b6c05; display: inline-block; color: white; font-size: 1em; margin-top: 20px; }

    li:first-child::before {
        display: none;
    }

    .marker-number {
      font-size: 14px;
    }

    li.active {
      background: #ffcb0f;
    }

    .active ~ li {
      background: #b7b7b7;
    }
    li.emp {
      border: 2px solid #FFFFFF;
      background:#FFFFFF;
    }
    ul:after,.emp:before {
      border:  #FFFFFF;
      border-color: #FFFFFF;
      background: #FFFFFF;
    }
    ~ li.emp {
        border:  #FFFFFF;
      border-color: #FFFFFF;
      background: #FFFFFF;
    }
    li:nth-last-child(2)::after{
        color: #FFFFFF;
        border: 2px solid #FFFFFF;
        border-color:#FFFFFF;
    }
    ul.lastchild.previousElementSibling{
        color: #FFFFFF;
        border: 2px solid #FFFFFF;
        border-color:#FFFFFF;
    }
    li.completed  {
      background: #228B22;
    }
    body {
      font-family: sans-serif;
      padding: 0em;
    }
    li:last-child::before {
        border-color:#FFFFFF;
    }