This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 8 years ago.
I've tried this and it works fine
<p alt="world">hello</p>
With CSS
p::after {
content: attr(alt);
}
But it doesn't work when I try
<img src="http://placehold.it/300x300" alt="my image caption">
With CSS
img::after {
content: attr(alt);
}
Is it possible to output alt text for an img using CSS?
Please indicate browser compatibility with any solution you provide.
Here's a jsfiddle
This is by design.
img tags are self-closing (<tag />) tag, and therefore they contain no "content". Since they do not contain any content, no content can be appended (i.e. ::after) or prepended (i.e. ::before).
This is also the case for other self-closing HTML elements:
<area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <keygen>,
<link>, <meta>, <param>, <source>, <track> and <wbr>
Here's what the (CSS2) Spec says:
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. [2014: hasn't happened yet]
Source: http://www.w3.org/TR/CSS2/generate.html#before-after-content
Related
This question already has answers here:
How to apply CSS to the first letter after :before content?
(4 answers)
Closed 4 months ago.
Given this markup
<span class="something">world</span>
and this CSS
.something::before {
content: 'hello';
}
I want to add CSS to capitalise the first letter that isn't in the before psudo element.
i.e. the w from world.
Initially I (somewhat naively) thought that the following would work:
.something::first-letter {
text-transform: uppercase;
}
But it actually capitalised the first letter of the before psudo element, and only that.
I also tried to apply :not but this isn't valid on psudo elements.
Is it possible to use CSS to capitalise the first-letter that isn't part of the before psudo element?
Usually you would do this with the :first-letter pseudo element, but you are using :before.
This inserts text before the actual content of your paragraph, rather than the first letter of the actual content, :first-letter would match the first letter of the :before content instead.
That means that instead of this:
<p class="normal">
<p:before>Former - </p:before>
<p.normal:first-letter>F</p.normal:first-letter>irst character of this paragraph will be normal and will have font size 40px;
</p>
You actually get this:
<p class="normal">
<p:before>
<p.normal:first-letter>F</p.normal:first-letter>ormer -
</p:before>
First character of this paragraph will be normal and will have font size 40px;
</p>
Due to how CSS generated content works, I don't think there's a solution in pure CSS to reach the first letter of the actual content once you have inserted content before it.
As an alternative, you could use a span in place of the :first-letter pseudo-element, to which you can then apply the blue color, but that means you have to insert extra elements:
<p class="normal"><span>F</span>irst character of this paragraph will be normal and will have font size 40px;</p>
p.normal {
font-size: 40px;
color: blue;
}
What I would like to do (not in IE obviously) is:
p:not(.list):last-child + :text {
margin-bottom: 10px;
}
Which would give a text node a margin. (Is that even possible?) How would I get the text node with CSS?
Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.
You cannot target text nodes with CSS. I'm with you; I wish you could... but you can't :(
If you don't wrap the text node in a <span> like #Jacob suggests, you could instead give the surrounding element padding as opposed to margin:
HTML
<p id="theParagraph">The text node!</p>
CSS
p#theParagraph
{
border: 1px solid red;
padding-bottom: 10px;
}
Text nodes (not wrapped within specific tags) can now be targeted in very specific use cases using the ::target-text pseudoelement selector. A query parameter (url-encoded; e.g. whitespace must be encoded as %20) that matches a string of text can be styled like this:
::target-text { /* color, background color, etc */ }
Just like other highlight pseudoelements, only certain style properties are supported, as listed here.
There is a demo for this (parent link is on the MDN page for ::target-text). Change the query parameter string for 'text' to different strings to see how different text becomes styled.
One limitation of the ::target-text pseudoelement selector is that only the first matching string of text can be styled. In addition, at 67.8%, browser support is modest as of January 2022.
This question already has answers here:
Can I target a :before or :after pseudo-element with a sibling combinator?
(2 answers)
Closed 6 years ago.
I currently try to unset a ::before content inside a css class if the following element is a image or got a specific class name.
Structure
The first element i got is a a:href with no specific id (i can't set one). This element creates a further pseudo element with ::before (a icon).
The second element is a image class inside the a:href
Example:
<a href="https://example.org/assets/uploads/2015/02/A-Upload.jpg">
<img class="alignright wp-image-8184 size-medium" width="300" height="188" sizes="(max-width: 300px) 100vw, 300px" srcset="https://example.org/assets/uploads/2015/02/A-Upload-300x188.jpg 300w, https://example.org/assets/uploads/2015/02/A-Upload-1600x1000.jpg 1600w" alt="test" src="https://example.org/assets/uploads/2015/02/xA-Upload-300x188.jpg.pagespeed.ic.H4F1dyfjOe.jpg">
</a>
I would like to use a css selector and remove the ::before content from the a if the second element is a image or got a specific css class.
I tried now several ways like
#main-content .content .post-inner .entry p a::before ~ img.alignright{
content: unset!important;
}
without success. I hope someone is able to tell me what i could have been done wrong.
There is currently no way to style a parent element based on a child element in CSS alone. What you are trying to do is simply not possible (in CSS3).
You need to either add a class to the a (or another parent node) and use that as your reference, or resort to JavaScript to update the styles of the parent based on the child img.alignright.
There is a :has() selector that has been proposed, but I don't think any browsers support it at this time. The syntax would be something like:
a:has(> img.alignright):before {
content: unset;
}
But, again, this is just in a draft of CSS 4 which is still a ways out, I'm sure.
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Closed 7 years ago.
I got http://jsfiddle.net/8p2Wx/2/ from a previous question I asked and I see these lines:
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
If I take away content:"", it ruins the effect, and I don't understand why it's necessary.
Why is it needed to add an empty content to :after and :before pseudo-elements?
You cannot style generated content without defining what that content should be. If you don’t really need any content, just an extra “invisible element” to style, you can set it to the empty string (content: '') and just style that.
It’s easy to confirm this yourself: http://jsfiddle.net/mathias/YRm5V/
By the way, the snippet you posted is the micro clearfix hack, which is explained here: http://nicolasgallagher.com/micro-clearfix-hack/
As for your second question, you’ll need an HTML5 shiv (small piece of JavaScript) to make <nav> stylable in some older browsers.
As the CSS spec. states, :after and :before pseudo elements are not generated if prop. content isn't set to a value other than 'normal' and 'none': http://www.w3.org/TR/CSS2/generate.html#content
content initial value is 'normal' and 'normal' computes to 'none' for the :before and :after pseudo-elements.
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page
see this for better explanation :
Css Content 1
Css Content 2
and the nav element is :
One of the new elements for HTML 5 is the element which allows you to group together links, resulting in more semantic markup and extra structure which may help screenreaders. In this article I’ll discuss how and where to use it as well as some reservations I have with the specifications definition.
Html5 TAGS
Is there a way to add special characters ♦ through CSS styles if so can you show an example that works on most browsers?
No, it is not possible, as such.
When using :after { content: }, you cannot specify HTML tags nor entities in the content string. You can, however, specify the symbols directly. (This is because the content string is not parsed as XML/HTML, but as plain text, and is inserted verbatim.)
In other words: a:after { content: "<" } will yield the equivalent visual to Some Link<.
a:after { content: "♦" }; will work perfectly, tho'.
You can use the :after and :before pseudoelements, however they are not supported by all browsers, have a look at
http://www.w3schools.com/css/pr_pseudo_after.asp
http://www.w3schools.com/css/pr_pseudo_before.asp
You should always avoid using CSS content because it's wrong to mix presentation with content of the page.
Additionally, CSS content is not supported by some browsers, i.e. by IE6 and IE7.
If I wanted to do it, I'd use CSS to attach background image and add some HTML element around the word:
<style type="text/css">
abbr { padding-right:20px;
background:url("http://img690.imageshack.us/img690/2005/blackdiamond.png") right no-repeat; }
</style>
<abbr>Something</abbr> very very Important goes here.
Result:
The only problem is - if I can modify the HTML to wrap my word with <span> or <abbr> or any other HTML element I could probably just wrtite ♦ in the code itself... your call.