This question already has an answer here:
Using :before and :after CSS selector to insert HTML [duplicate]
(1 answer)
Closed 8 years ago.
is there any CSS way to add div, p, span elements inside css content attribute?
I mean code like this
.textblockquote:before{
content: "<span class='green'>“</span>";
}
you won't be able to insert other things than text-element with css
BUT, what you want to do can be achieved this way :
.textblockquote:before{
color:green; /* <-- apply the styling you want */
content: "\0022"; /* <-- escaped unicode for 'quote' */
}
In the meantime, your question has already been answered (30 months ago): Using :before and :after CSS selector to insert Html
Look :
You can achive this with hexadecimal characters, but you shouldn't :)
See here: Adding HTML entities using CSS content
No, CSS is all about styling, not adding code.
You might be able to workaround this, but it's very bad practice.
It will probably be easier to achieve the requested effect or design in another way.
Its possible but its designed for text not html.
http://www.quirksmode.org/css/content.html,
Here is an example how you can achive this in Firefox. ( 2nd answer )
Insert HTML from CSS
You can add content as text for example, and customize it for you needs. In your case, you can add quotes in content of :before and :after elements, and absolute position them where you want.
Related
This question already has an answer here:
What is it in a pseudo-element that makes the pseudo-element pseudo?
(1 answer)
Closed 6 years ago.
When I read about CSS and HTML I cross the word pseudo-elements.
I haven't found a good short explanation for what pseudo means. Could someone please explain this to me?
psuedo-elements allow you to style specific parts of an element. Some examples of pseudo-elements are:
::after
::before
These specific ones allow you to add style to just after, or just before an element.
for example:
.test {
background-color: gray;
}
.test::after {
content: ' some more text';
color: red
}
<div class='test'>
testing...
</div>
Here, we style the .test element normally
BUT, then we add a bit more after it using the pseudo-element selector ::after to let us add more text and change the colour.
You can read more and see more examples at https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements
Supposed or purporting to be but not really so; false; not genuine:
— https://en.oxforddictionaries.com/definition/pseudo-
A pseudo-element is something that acts like an element, but is not an element.
In a word, "fake".
A more complete definition can be found here: http://www.dictionary.com/browse/pseudo
A pseudo element is a CSS-generated non-DOM element that is rendered as if it was a DOM element in the browser. But it doesn't actually add a node to the DOM. So if you inspected it in, say Chrome Dev Tools, you won't see it as a regular node.
Interestingly some screen-readers read pseudo-element content and others don't.
This question already has answers here:
Are custom elements valid HTML5?
(12 answers)
Closed 7 years ago.
Is it possible to use custom tags in html such as <g></g> to group text? I then want to apply styling to these custom tags via CSS that accomplish the same thing as in the fiddle with the rounded rectangles and blue text.
The reason all of this is needed is because the first way I have it set up in the fiddle uses generated content - which isn't part of the DOM so the blue text can't be highlighted/selected so that you can copy/paste it.
The solution I came up with was to make the generated content not generated, but merely distinguish the tags from the actual content by a delimiter, in this case, the | character.
So I need a way to produce the same output as the original, but with the new syntax, so that way the text can be copyable.
http://jsfiddle.net/xa3apsdc/20/
Do <span class="g"></span> instead and problem solved.
On custom tags older browsers cant support it, but you can handle them as other not supported (ex. canvas) tags, so if you really need it, you can do it: http://jsfiddle.net/xa3apsdc/22/
You will encouter some problems anyway: custom tags not working in ie8
Key is to set display rule to element: display:block; or display:inline-block and you are set to go.
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 8 years ago.
I am working on an input form, with different input fields. They all get an attribute with their form.
Eg:
<input class="input-text" form="price">
or
<input class="input-text" form="percent">
I would like to add a suffix with the pseudo element ::after but cannot figure out how.
Ive already tried this CSS:
input[form="price"]::after{
content: "€";
}
and this:
input::after[form="price"]{
content: "€";
}
The problem seems to be with the ::after itself, but i cannot figure out what it is.
Pseudo classes like after and before cannot work on input elements. Why so?
Because they work only on elements which can contain html markup. An input tag doesn't.
Robert Koritnik explained this quite good in this question.
There're other questions like that and like this:
CSS :after input does not seem to work
Add CSS content image after input
Clearly saying no you cannot do that in non container tags.
According to w3 standard :after or :before can be used in only container element.
So you will have to use javascript.
See specification http://www.w3.org/TR/CSS2/generate.html#before-after-content
But there is an alternative you can use contenteditable property which makes div editable & then you can use after tag. But contenteditable is introduced in html5.
Here is a js fiddle http://jsfiddle.net/madterry/W4Y58/ . Down side is you cannot use this as form field & it is not widely supported.
The problem is, that pseude elements are only supported on container elements, but not on allready replaced elements like images or input fields.
This is because they get rendered in the element itself, which is clearly impossible on input elements.
In the W3C specification it is even defined.
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 2 years ago.
I have baloon shape designed with CSS3.
JS Fiddle Example
It's have triangle made with
:after {
content: "";
}
I need to moving triangle left-right with modify left css param with Jquery.
I know that i can't select pseudo element which out of DOM, but is there another way to change :after style with js?
Yes, we can put another div inside like
<div class="pop"><div class="arr"></div></div>
but it's ugly
There is a much easier way: just set the pseudo element's content property value to attr(some-attribute-name), it will use the value of the HTML attribute on the parent as the content for the pseudo element. You can then use the setAttribute() method on the parent element to change the value dynamically. Below are mock snippets of how this method would look in action. I also did a blog post with further details that contains a live example fiddle.
CSS
#SomeElement:after {
content: attr(some-attribute-name);
}
HTML
<div id="SomeElement" some-attribute-name="Pseudo content here!"></div>
JavaScript (to change pseudo content)
var someElement = document.getElementById('SomeElement');
someElement.setAttribute('some-attribute-name', 'New pseudo content here!');
You insert the CSS styles dynamically in the head, and then modify that:
$("<style type='text/css' id='dynamic' />").appendTo("head");
$('.pop').click(function(e){
$("#dynamic").text(".pop:after{left:" + e.offsetX+ "px;}");
});
Here is a demo
http://jsfiddle.net/HWnLd/
As per this related question, you can't select the pseudo element. So I'd suggest defining additional CSS classes, and adding classes to the balloon with jQuery. E.g. use a class like this:
.pop.right:after {
left: 80%;
}
and apply it like this:
$('div.pop').addClass('right');
Working jsFiddle: http://jsfiddle.net/nrabinowitz/EUHAv/2/
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS selector for “foo that contains bar”?
All the <p> on my site get margin-bottom of 20px.
I don't want to apply this margin-bottom to <p> which contain an <em> element.
Is it possible to this without classes or id's.
CSS3 can be used.
To apply style to all p not containing an em:
p:not(:has(em)) {
margin-bottom: 20px;
}
I'm afraid this isn't possible with pure CSS.
Unfortunately, there is no way to do this with pure css. See Is there a CSS parent selector?
You could use some jQuery though.
$('em').parent().css('marginBottom','0');
http://jsfiddle.net/jasongennaro/5pPGF/
The only way I could see doing this in pure CSS is with a parent-node selector. Unfortunately, such a thing does not exist in CSS2 or CSS3.
What you're describing is basically an "ascendent" selector, selecting some element based upon its descendents. This isn't possible using just CSS, you would have to also use JavaScript.
Pure CSS does not do that (yet) as far as I know, but you can achieve this by smart use of jQuery:
$(function() {
$("em").parent("p").addClass("nomargin")
})
Or something like that...
Your question is unclear. Pleae recheck your question. But you can set margins, paddings for global tags like
p{margin:0}
or
*{margin:0; padding:0 } for all elements then change it for exact divs, classes. In that case all other ones still will set to margin:0, padding:0