So we want to add some text, and style it,
but wrapping with
but wrapping with
spanrequires too much text adding: opening and closing tags +
as fast as I know, I'm the first one ever implemented using this technique.. and in production (isn't it the idea of every product eventually..?).
.. you have to think out of the box for this crazy trick to be seen reasonable to you.. (and there goes the 4'th wall..).
- you want a self-closing tag but one that will show you some text..
# first attempt:
\\"is permitted !!
this works since the
srcis not specified, so the
but you'll get the native border around which you should disable using
but its MORE TEXT, so no-go
that pesky border (CSS border is a different one) is there because we use W3C's official
ALTattribute, but we can do better,
joining some CSS's
attr()and putting the text in one of the attributes.
the HTML is:
and the CSS is:
but it won't work, since the
imgtag's text-content does not mean anything (unlike other tags, the
lets change to something quite different either the
:after"area", which technically uses same, still minimal self-closing tag of img, but just as a placeholder.
ooopss... apparently you can only see the
:beforeif you'll still place an
hmmm.. so its not optimal since we've already adding quite a lot of text, and it is becoming a bit more complex than necessary.
- we can do better, using CSS we can cheat and use
which is technically not in the HTML markup, and CSS are far more optimized than HTML, also, loaded parallel and optionally CPU-accelerated. so we're good here..
this was the result (works really well..)
first is the html markup:
<t x=hello>now the CSS markup which you can include in a separate CSS file
/* minimal */
/* optional styling - very specific and easy to use */
/* optional styling - for all "minimal text tags" */
margin:4px 4px 4px 4px;
padding:4px 4px 4px 4px;
border:1px solid purple;
here is a little fun with http://jsfiddle.net/nra1jwjo/