Readmore plugin with fake or placeholder tag

Currently i've been buillding my readmore plugin and it was work, but i've problems likes as :

The icon of button cannot maximize, my dimention icon is 36x12px

When i insert the readmore and then if i click the source code button, it will show like this :

<p style="border-top: 1px dotted #999999;background: url(http://localhost/triawan/ckeditor/plugins/readmore/icons/readmore.png) no-repeat center center;"><!--readmore--></p>

The problem is :

i wanna inserting tag just like this :

<p><!--readmore--></p>

or just

<!--readmore-->

but keep show the dotten line for user interface.

this's my source code of readmore

CKEDITOR.plugins.add( 'readmore', {
    icons: 'readmore',
    init: function( editor ) {
        editor.addCommand( 'insertReadmore', { 
            modes : { wysiwyg:1, source:0 }, canUndo : true,
            exec: function( editor ) {    
                editor.insertHtml( '<p style="border-top: 1px dotted #999999;background: url(' + CKEDITOR.plugins.getPath('readmore') + 'icons/readmore.png' + ') no-repeat center center;"><!--readmore--></p>' );

            },
            editorFocus : true
        });
        editor.ui.addButton( 'Readmore', {
            label: 'Insert Readmore',
            command: 'insertReadmore'
        });
    }
});

thanks for your appreciate, i'm realy need your help. thanks