CSS after pesudo class text decoration in link -


this question has answer here:

the goal of question create code adds filetype after link (so people know whether should expect special files). there options using image, don't , prefer have file type between square brackets in different size. approach use :after pseudoclass in following way

a[href$='.doc']:after, a[href$='.rtf']:after { content: " [doc]"; font-family: monospace; font-size: 60%; font-weight:bolder; color:red; position:relative; top: -0.8em;     } 

however, gets me strange problem. content seems in block part of link. therefore link underlining continues after link under "[doc]".

so question pretty straightforward: there way either in way or make sure can control under "[doc]" separately under link?

try adding display: inline-block;

a[href$='.doc']:after, a[href$='.rtf']:after { content: " [doc]"; display: inline-block; font-family: monospace; font-size: 60%; font-weight:bolder; color:red; position:relative; top: -0.8em;     } 

not tested in ie think ie has trouble attribute selectors , :after or both.


Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -