Capture.PNG

<div>
Hi tagit<br />
Thank you. I managed to do the same using simply CSS and it works just as good as your jQuery solution. Thank you now i know how to when i need to use jQuery :-)
</div>


Hi tagit
Thank you. I managed to do the same using simply CSS and it works just as good as your jQuery solution. Thank you now i know how to when i need to use jQuery :-)

<div>
Please post your solution too as it would be a good resource to have
</div>


Please post your solution too as it would be a good resource to have

<div>
<div class="content wysiwyg-content">
Hi Guys,<br />
<br />
I have few UL lists in a page.<br />
Here is the code below including the jQuery. What i am trying to do is fill in the gap between the end of &quot;href&quot; text to the &quot;span&quot; with dotted line&quot; suc has in the screenshot attached.<br />
<br />
The HTML<br />
<br />

<pre><code id="code-10-28227817-1">&lt;div id=&quot;poi&quot;&gt;

    &lt;ul&gt;
       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem Ipsum is simply dummy  &lt;span&gt;&amp;raquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem Ipsum is  &lt;span&gt;&amp;raquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem Ipsum is simply &lt;span&gt;&amp;raquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;ul&gt;
       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem Ipsum is simply dummy  &lt;span&gt;&amp;raquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem Ipsum is  &lt;span&gt;&amp;raquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem Ipsum is simply &lt;span&gt;&amp;raquo;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;/div&gt;</code></pre>
<br />

<pre><code id="code-10-28227817-2">$(document).ready(function() {
	var poiList = $(&quot;#poi ul&quot;);
	
	$(poiList).each(function() {
		var poiListWidth = ($(this).width());
		$(this).css({'width': poiListWidth+10 });	
	});	
});</code></pre>
<br />
<a href="https://filedb.experts-exchange.com/incoming/2013/08_w35/674736/dotted.gif" target="_blank" title="dotted lines per distance between end of text to span (2 KB)"><img alt="dotted lines per distance between end of text to span" class="file-block lazyload" style="max-width: 502px;" data-src="https://filedb.experts-exchange.com/incoming/2013/08_w35/674736/dotted.gif" /></a>
</div>
</div>


dotted lines per distance between end of text to span

dotted.gif

Hi Guys,

I have few UL lists in a page.
Here is the code below including the jQuery. What i am trying to do is fill in the gap between the end of "href" text to the "span" with dotted line" suc has in the screenshot attached.

The HTML

(CODE)

(CODE)



jQuery add dotted lines

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.