This question already has an answer here:
:before pseudo-class doesn't work with images
(1 answer)
Closed 8 years ago.
I'm trying to put pseudo class after image in html but it doesn't work. That's what I've done:
<img src="image.png" class="item-portfolio" alt="portfolio item">
CSS
.item-portfolio img:after{
content: url(images/shadow.png) no-repeat;
position: absolute;
right: 8px;
top: 0;
}
.item-portfolio p:before{
content: url(images/shadow.png) no-repeat;
display: block;
position: absolute;
left: 6px;
top: 0;
}
Is it posible to set this images after image?
img elements are replaced elements, the HTML spec specifically states:
Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.
As such, such pseudo elements should not be used for img.
The way of counteracting this is to wrap the image within a parent element, and apply :before/after to that.
More on replaced elements from MDN
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independant of the CSS. Typical replaced elements
are <img>, <object>, <video> or forms element like <textarea>,
<input>. Some elements, like or are replaced elements
only in specific cases. Object inserted using the CSS content
properties are anonymous replaced elements.
SCRIPT
$('img')
.before('<span> Before</span>')
.after('<span> After</span>');
Through Jquery u can insert after and Before
pseudo-elements do not work with img tag
http://www.w3.org/TR/CSS2/generate.html#before-after-content
Related
I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements.
If so, how would I implement something like this with inline CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
You can't specify inline styles for pseudo-elements.
This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can't be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element.
Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.
As an aside, the main difference between pseudo-elements and pseudo-classes in this aspect is that properties that are inherited by default will be inherited by :before and :after from the generating element, whereas pseudo-class styles just don't apply at all. In your case, for example, if you place text-align: justify in an inline style attribute for a td element, it will be inherited by td:after. The caveat is that you can't declare td:after with the inline style attribute; you must do it in the stylesheet.
as mentioned above: its not possible to call a css pseudo-class / -element inline.
what i now did, is:
give your element a unique identifier, f.ex. an id or a unique class.
and write a fitting <style> element
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly, but what inline css isnt..?
You can use the data in inline
<style>
td { text-align: justify; }
td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>
<table><tr><td data-content="post"></td></tr></table>
You can't create pseudo elements in inline css.
However, if you can create a pseudo element in a stylesheet, then there's a way to style it inline by setting an inline style to its parent element, and then using inherit keyword to style the pseudo element, like this:
<parent style="background-image:url(path/to/file); background-size:0px;"></p>
<style>
parent:before{
content:'';
background-image:inherit;
(other)
}
</style>
sometimes this can be handy.
No you cant target the pseudo-classes or pseudo-elements in inline-css as David Thomas said.
For more details see this answer by BoltClock about Pseudo-classes
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes are a member of the family of selectors,
which don't occur in the attribute .....
We can also write use same for the pseudo-elements
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes and pseudo-elements the are a member of the family of selectors, which don't occur in the attribute so you cant style them inline.
Yes it's possible, just add inline styles for the element which you adding after or before, Example
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
As mentioned before, you can't use inline elements for styling pseudo classes. Before and after pseudo classes are states of elements, not actual elements. You could only possibly use
JavaScript for this.
If you have control over the HTML then you could add a real element instead of a pseudo one.
:before and :after pseudo elements are rendered right after the open tag or right before the close tag.
The inline equivalent for this css
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Would be something like this:
<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>
Keep in mind; Your "real" before and after elements and anything with inline css will greatly increase the size of your pages and ignore page load optimizations that external css and pseudo elements make possible.
you can use
parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");
in css
el:after{
....
padding-top:var(--padding-top, 0px);
}
EDITED: If you have access to the stylesheet, you can pass the variable values inline and then, in your stylesheet, use the inherit value for the pseudo-element property you want to manipulate:
HTML
<div style="color: whitesmoke;">
</div>
CSS
div::before {
content: '';
color: inherit;
}
Useful for background images for example.
Is it possible to have multiple :before pseudos for the same element?
.circle:before {
content: "\25CF";
font-size: 19px;
}
.now:before{
content: "Now";
font-size: 19px;
color: black;
}
I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.
In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
As a result, when you have multiple :before rules matching the same element, they will all cascade and apply to a single :before pseudo-element, as with a normal element. In your example, the end result looks like this:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
As you can see, only the content declaration that has highest precedence (as mentioned, the one that comes last) will take effect — the rest of the declarations are discarded, as is the case with any other CSS property.
This behavior is described in the Selectors section of CSS2.1:
Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.
This implies that selectors with pseudo-elements work just like selectors for normal elements. It also means the cascade should work the same way. Strangely, CSS2.1 appears to be the only reference; neither css3-selectors nor css3-cascade mention this at all, and it remains to be seen whether it will be clarified in a future specification.
If an element can match more than one selector with the same pseudo-element, and you want all of them to apply somehow, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should do in those cases. I can't provide a complete example including the content property here, since it's not clear for instance whether the symbol or the text should come first. But the selector you need for this combined rule is either .circle.now:before or .now.circle:before — whichever selector you choose is personal preference as both selectors are equivalent, it's only the value of the content property that you will need to define yourself.
If you still need a concrete example, see my answer to this similar question.
The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements using a notation that's compatible with the CSS2.1 cascade, but note that that particular document is obsolete — it hasn't been updated since 2003, and no one has implemented that feature in the past decade. The good news is that the abandoned document is actively undergoing a rewrite in the guise of css-content-3 and css-pseudo-4. The bad news is that the multiple pseudo-elements feature is nowhere to be found in either specification, presumably owing, again, to lack of implementer interest.
If your main element has some child elements or text, you could make use of it.
Position your main element relative (or absolute/fixed) and use both :before and :after positioned absolute (in my situation it had to be absolute, don't know about your's).
Now if you want one more pseudo-element, attach an absolute :before to one of the main element's children (if you have only text, put it in a span, now you have an element), which is not relative/absolute/fixed.
This element will start acting like his owner is your main element.
HTML
<div class="circle">
<span>Some text</span>
</div>
CSS
.circle {
position: relative; /* or absolute/fixed */
}
.circle:before {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
.circle:after {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
.circle span {
/* not relative/absolute/fixed */
}
.circle span:before {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
I've resolved this using:
.element:before {
font-family: "Font Awesome 5 Free" , "CircularStd";
content: "\f017" " Date";
}
Using the font family "font awesome 5 free" for the icon, and after, We have to specify the font that we are using again because if we doesn't do this, navigator will use the default font (times new roman or something like this).
You can also use an image/icon plus text in the content field
e.g.
p.album-title::after {
content: url('https://...camera-icon-blue.png') ' View >';
display: block;
...;
}
In ::after css set content:'any text' and add backgroun-image with svg text from external svg file url(anySvgText.svg) or inline svg code url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">any second text</text></svg>')
Also you can use only svg instead content value. but you must set empty string (content: '') to display a ::after style
.circle:before {
content: "\25CF";
font-size: 19px;
color: red;
width: 200px;
display: block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">Now</text></svg>');
background-position-x: 15px;
}
<div class="circle"></div>
Is it possible to have multiple :before pseudos for the same element?
.circle:before {
content: "\25CF";
font-size: 19px;
}
.now:before{
content: "Now";
font-size: 19px;
color: black;
}
I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.
In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
As a result, when you have multiple :before rules matching the same element, they will all cascade and apply to a single :before pseudo-element, as with a normal element. In your example, the end result looks like this:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
As you can see, only the content declaration that has highest precedence (as mentioned, the one that comes last) will take effect — the rest of the declarations are discarded, as is the case with any other CSS property.
This behavior is described in the Selectors section of CSS2.1:
Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.
This implies that selectors with pseudo-elements work just like selectors for normal elements. It also means the cascade should work the same way. Strangely, CSS2.1 appears to be the only reference; neither css3-selectors nor css3-cascade mention this at all, and it remains to be seen whether it will be clarified in a future specification.
If an element can match more than one selector with the same pseudo-element, and you want all of them to apply somehow, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should do in those cases. I can't provide a complete example including the content property here, since it's not clear for instance whether the symbol or the text should come first. But the selector you need for this combined rule is either .circle.now:before or .now.circle:before — whichever selector you choose is personal preference as both selectors are equivalent, it's only the value of the content property that you will need to define yourself.
If you still need a concrete example, see my answer to this similar question.
The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements using a notation that's compatible with the CSS2.1 cascade, but note that that particular document is obsolete — it hasn't been updated since 2003, and no one has implemented that feature in the past decade. The good news is that the abandoned document is actively undergoing a rewrite in the guise of css-content-3 and css-pseudo-4. The bad news is that the multiple pseudo-elements feature is nowhere to be found in either specification, presumably owing, again, to lack of implementer interest.
If your main element has some child elements or text, you could make use of it.
Position your main element relative (or absolute/fixed) and use both :before and :after positioned absolute (in my situation it had to be absolute, don't know about your's).
Now if you want one more pseudo-element, attach an absolute :before to one of the main element's children (if you have only text, put it in a span, now you have an element), which is not relative/absolute/fixed.
This element will start acting like his owner is your main element.
HTML
<div class="circle">
<span>Some text</span>
</div>
CSS
.circle {
position: relative; /* or absolute/fixed */
}
.circle:before {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
.circle:after {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
.circle span {
/* not relative/absolute/fixed */
}
.circle span:before {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
I've resolved this using:
.element:before {
font-family: "Font Awesome 5 Free" , "CircularStd";
content: "\f017" " Date";
}
Using the font family "font awesome 5 free" for the icon, and after, We have to specify the font that we are using again because if we doesn't do this, navigator will use the default font (times new roman or something like this).
You can also use an image/icon plus text in the content field
e.g.
p.album-title::after {
content: url('https://...camera-icon-blue.png') ' View >';
display: block;
...;
}
In ::after css set content:'any text' and add backgroun-image with svg text from external svg file url(anySvgText.svg) or inline svg code url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">any second text</text></svg>')
Also you can use only svg instead content value. but you must set empty string (content: '') to display a ::after style
.circle:before {
content: "\25CF";
font-size: 19px;
color: red;
width: 200px;
display: block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">Now</text></svg>');
background-position-x: 15px;
}
<div class="circle"></div>
This question already has answers here:
CSS :after not adding content to certain elements
(5 answers)
Closed 8 years ago.
Is it possible to append text to images using the ::after pseudo-selector?
img[src="images/interface-zoom-buttons.png"]::after {
content: "these are the zoom buttons";
}
The desire is to use the selector to provide a caption (other styling will be applied to the content of the selector) for images that get used over and over again in multiple HTML documents.
In the above example the image appears correctly and you can see that the appropriate CSS has been applied, but the content (supplied by the selector) is not seen in the output.
An img tag can not have child elements. Because img is a void element and its content model never allows it to have contents under any circumstances.
::after creates a pseudo element as the last child of its parent.
So img::after will not work ultimately because the browser will not allow it based on definition.
What you can do is to contain the img in a container and have ::after on the container.
Demo http://jsfiddle.net/x2za91jw/
HTML
<div class="container">
<img src="http://www.gazette-ariegeoise.fr/IMG/jpg/test.jpg" />
</div>
CSS
.container {
position: relative;
}
.container::after {
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
content:"these are the zoom buttons";
}
This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 7 years ago.
Trying to make information about image below it. But have A problem... Pseudo element is not visible..
<img info="hey guys" src="http://i024.radikal.ru/1211/4c/809c7c2dfa74.jpg">
<div info="I'm working, but I'm inside the block"></div>
div {
height: 100px;
margin: 10px;
background: yellow;
}
div[info]::after, img[info]::after {
content: attr(info);
display: block;
margin: 3px;
color: black;
font-style: italic;
}
Jsfiddle DEMO
Thanks.
img elements can't have pseudo elements, because they can't have children—::before is inserted within the element. It would look like this:
<img><before></img>
Or at least itt isn't defined by the spec
This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Pseudo elements are appended/prepended to the element's contents. Since an <img> (and an <input> for instance) has no contents, it cannot have pseudo elements applied on it.