Question

I’ve got a custom tag ab which is defined like so http://jsfiddle.net/JcLx4/2/ I want to make the black line behind the text draw till end of the line. How would I achieve this?

Answer 1

Add ab { display: block; } to the CSS. Demo: http://jsfiddle.net/JcLx4/6/

Unknown elements are inline (display: inline) by default.

If you want the styling to work in Internet Explorer 8 and older versions, you’ll need to use some JavaScript. Karl Nicoll’s answer describes a solution that will work for screen media, but it still won’t enable the styles for print media. If that’s what you want, you can use this modified version of the IE Print Protector:

/*! iepp v1.6.2 MIT @jon_neal */
(function(k,o){var a='ab',f=a.split('|'),d=f.length,b=new RegExp('(^|\\s)('+a+')','gi'),h=new RegExp('<(/*)('+a+')','gi'),m=new RegExp('(^|[^\\n]*?\\s)('+a+')([^\\n]*)({[\\n\\w\\W]*?})','gi'),p=o.createDocumentFragment(),i=o.documentElement,n=i.firstChild,c=o.createElement('body'),g=o.createElement('style'),j;function e(r){var q=-1;while(++q<d){r.createElement(f[q])}}function l(u,s){var r=-1,q=u.length,v,t=[];while(++r<q){v=u[r];if((s=v.media||s)!='screen'){t.push(l(v.imports,s),v.cssText)}}return t.join('')}e(o);e(p);n.insertBefore(g,n.firstChild);g.media='print';k.attachEvent('onbeforeprint',function(){var r=-1,u=l(o.styleSheets,'all'),t=[],w;j=j||o.body;while((w=m.exec(u))!=null){t.push((w[1]+w[2]+w[3]).replace(b,'$1.iepp-$2')+w[4])}g.styleSheet.cssText=t.join('\n');while(++r<d){var s=o.getElementsByTagName(f[r]),v=s.length,q=-1;while(++q<v){if(s[q].className.indexOf('iepp-')<0){s[q].className+=' iepp-'+f[r]}}}p.appendChild(j);i.appendChild(c);c.className=j.className;c.innerHTML=j.innerHTML.replace(h,'<$1font')});k.attachEvent('onafterprint',function(){c.innerHTML='';i.removeChild(c);i.appendChild(j);g.styleSheet.cssText=''})})(this,document)

See where it says var a='ab'? You can add other elements there, using | as a separator, e.g. var a='ab|foo|bar' will enable <ab>, <foo> and <bar> styling.