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/
Related
im trying to add some custom styles to title attribute in scss, i found a resource which show how to do this in css, basically it nest one pseudo element inside another,
[data-title]:hover::before {
content: attr(data-title);
}
how can i convert this nesting in to scss?
below is the link which i refer, it use css, i want it on scss,
https://codepen.io/shimdim/pen/NjyNNb
You coould try it like this:
Use &:hover:after {} for targeting the after pseudo-element of the element being hovered over.
&:after:hover {} would select the after pseudo-element and used on hover it.
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:
Does :before not work on img elements?
(16 answers)
Closed 7 years ago.
I have web application with some more pages and i cant change the all pages, but i can change the css code.
I have a img with "thumbnail" tag with css class to show the image.
i want to show a box over image with css.
.thumbnail {position:relative;width:128px;height:128px;}
.thumbnail:after {position:absolute;width:20px;height:128px;top:0px;right:0px;background-color:#ff0;content:" ";z-index:100;}
<img class="thumbnail" src="http://mrizvandi.com/Media/Image/QRCode/ContactInfo.jpg" />
When i use the :after in css, i cant see any effect!
Is there any solution to show overlay box without additional tag and just use css?
Thanks In Advance.
This is not possible. Replaced elements could not have ::before and ::after pseudo-elements.
Replaced content
If the computed value of the part of the 'content' property that ends
up being used is a single URI, then the element or pseudo-element is a
replaced element. The box model defines different rules for the layout
of replaced elements than normal elements. Replaced elements do not
have '::before' and '::after' pseudo-elements; the 'content' property
in the case of replaced content replaces the entire contents of the
element's box.
To insert text around replaced content, '::outside::before' and
'::outside::after' may be used.
You could solve the problem by selecting a parent element to place the pseudo-element.
Reference: w3.org - Generated and Replaced Content Module - Replaced content
Because of browser behavior and css rules, i change my strategy, and change all pages ;)
Add a div as container for image.
with style "position:relative"
Add image as child of div.
Add :after class to container.
.thumbnail {position:relative;width:128px;height:128px;}
.thumbnail:after {position:absolute;width:20px;height:128px;top:0px;right:0px;background-color:rgba(255,0,0,0.5);content:" ";z-index:100;}
.thumbnail>img {width:128px;height:128px;}
<div class="thumbnail">
<img src="http://mrizvandi.com/Media/Image/QRCode/ContactInfo.jpg" />
</div>
Thanks to all friends
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.
Is there anyway to add new tag in Html through CSS?
like for Jquery but translated in css:
$('div.ms-inputuserfield').wrap('<a href="#"/>');
No, with CSS there is only one possibility - pseudo selectors :after/:before with 'content' property. But it wont add the element to the DOM, so it wont be possible to reference it from the javascript.