title: Insert a line between two element using css
body: <p>I'm editing a sequence diagram on <a href="https://app.zenuml.com/" rel="nofollow noreferrer">https://app.zenuml.com/</a> with the code like this :</p>
  
  <pre><code>// This is a sample
  A.method() {
  
  }
  
  A.anotherMethod() {
  
  }
  </code></pre>
  
  <p>In the diagram rendered, I want to insert a solid line between the two methods.
  <a href="https://i.stack.imgur.com/Sud1S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sud1S.png" alt="enter image description here"></a></p>
  
  <p>It looks like ZenUml has CSS support, to change the style of the diagram. 
  I wondering whether adding a line is also can be done using CSS.</p>
  
  <p>The generated DOM is like below. You can check it out from <a href="https://app.zenuml.com" rel="nofollow noreferrer">https://app.zenuml.com</a> by pasting the above DSL in the editor.</p>
  
  <pre><code>&lt;div data-v-6909fd0d="" class="message-layer"&gt;
      &lt;div data-v-6909fd0d="" style="padding-left: 4px;"&gt;
          &lt;div&gt;
              &lt;div data-v-44cbabc4="" signature="method()" class="interaction sync" style="width: 128px;"&gt;
                  &lt;!----&gt;
                  &lt;div data-v-50fe6874="" data-v-44cbabc4="" class="message" style="border-bottom-style: solid;"&gt;
                      &lt;div data-v-50fe6874="" class="name"&gt;method()&lt;/div&gt;
                      &lt;div data-v-102217b1="" data-v-50fe6874="" class="point fill"&gt;&lt;svg data-v-102217b1="" height="20"
                              class="arrow"&gt;
                              &lt;polyline data-v-102217b1="" points="0,7 10,13 0,19" class="right"&gt;&lt;/polyline&gt;
                              &lt;polyline data-v-102217b1="" points="10,7 0,13 10,19" class="left"&gt;&lt;/polyline&gt;
                          &lt;/svg&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div data-v-a0d3b81a="" data-v-44cbabc4="" class="occurrence"&gt;
                      &lt;div data-v-a0d3b81a=""&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!----&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div data-v-44cbabc4="" signature="anotherMethod()" class="interaction sync" style="width: 128px;"&gt;
                  &lt;!----&gt;
                  &lt;div data-v-50fe6874="" data-v-44cbabc4="" class="message" style="border-bottom-style: solid;"&gt;
                      &lt;div data-v-50fe6874="" class="name"&gt;anotherMethod()&lt;/div&gt;
                      &lt;div data-v-102217b1="" data-v-50fe6874="" class="point fill"&gt;&lt;svg data-v-102217b1="" height="20"
                              class="arrow"&gt;
                              &lt;polyline data-v-102217b1="" points="0,7 10,13 0,19" class="right"&gt;&lt;/polyline&gt;
                              &lt;polyline data-v-102217b1="" points="10,7 0,13 10,19" class="left"&gt;&lt;/polyline&gt;
                          &lt;/svg&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div data-v-a0d3b81a="" data-v-44cbabc4="" class="occurrence"&gt;
                      &lt;div data-v-a0d3b81a=""&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!----&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>