Is there any way to insert an HTML element, dom or code from CSS(3)?
-
3No, you cannot insert HTML code from CSS.codewario– codewario2011-02-02 20:57:37 +00:00Commented Feb 2, 2011 at 20:57
Add a comment
|
5 Answers
No. The only you can do is to add content (and not an element) using :before or :after pseudo-element.
More information: http://www.w3.org/TR/CSS2/generate.html#before-after-content
Comments
Content (for text and not html):
http://www.quirksmode.org/css/content.html
But just to be clear, it is bad practice. Its support throughout browsers is shaky, and it's generally not a good idea. But in cases where you really have to use it, there it is.
9 Comments
yoda
why is that? I use :after to make elements height dynamic.
fiiv
Generally, you'd want to use Javascript to achieve this kind of thing. Using
getElementById with .innerHTML and .value makes it really easy.
Richard JP Le Guen
I don't understand why it's bad practice. Can you elaborate? Is it just a browser support issue? As I understand it, all modern browsers support the property.
fiiv
@LwguRi well firstly, yes, browser support. IE before IE8 does not support this property, and Opera 9 supports it in a different way from Firefox and Chrome. Secondly, as I mentioned earlier, this is the kind of thing Javascript is intended to do. It's like using a
<font> tag. You technically CAN and it will work in Transitional, but you don't use it because that's what CSS is for. You can eat soup with a fork too, but that doesn't mean it's a great idea.Richard JP Le Guen
@MT - I disagree; if I need a colon (
:) between a <label> and its <input> that's presentational. Technically that's what CSS is for, but given the above points I suppose a case can be made for using JavaScript instead. But if you mean that specifically @methyl's example is better suited for JS I don't think I have an argument there. |
No you cannot. The only thing you can do is to insert content. Like so:
p:after {
content: "yo";
}
2 Comments
Wael Assaf
::after is a pseudo-element not a pseudo-class
Computer says 'no'--SOooooo
@WaelAssaf: true, but as MDN explains, browsers support both syntaxes for this, for (backwards) compatibility purposes.
An alternative - which may work for you depending on what you're trying to do - is to have the HTML in place and then use the CSS to show or hide it depending on the class of a parent element.
OR
Use jQuery append()
Comments
This can be done. For example with Firefox
CSS
#hlinks {
-moz-binding: url(stackexchange.xml#hlinks);
}
stackexchange.xml
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<binding id="hlinks">
<content>
<children/>
<html:a href="/privileges">privileges</html:a>
<html:span class="lsep"> | </html:span>
<html:a href="/users/logout">log out</html:a>
</content>
</binding>
</bindings>
1 Comment
Computer says 'no'--SOooooo
Probably doesn't work anymore any current browsers though udn.realityripple.com/docs/Archive/Web/CSS/-moz-binding Looks like FFox dropped it in ver 67 when they abandoned XUL/XBL more generally, AFAICT.