I'm trying to find some uptodate info about various possible uses for content: property in css but only find stuff in the ancients dungeons of the web dating from 2004 orso so I thought I have to ask this in 2011 again:
p:before {
content: url(dingdong.png);
}
p:before {
content: "some text ";
}
I'm very new to both the :before selector as well as the content: property and heard of it accidentally on this question which was answered very creatively by a lovely lady:
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags
Only to find out that some problems might occur concerning the actual encoding of the content:
li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?
And so my concrete question is: besides url() and "text", are ther other possibilities?
Thanks very much for your suggestions and ideas.
Oh, too many to list. Some of the most common cases are:
Special numbering, with the counter() function, along with the counter-reset and counter-increment properties
Pure CSS clearfix with:
.foo:after {
content: "";
display: block;
clear: both;
}
Display attributes, eg to print URLs for hyperlinks in a print stylesheet
a[href]:after {
content: ' (' attr(href) ') ';
}
Add typographic ornaments that shouldn't be in the HTML because they're presentational. For example, in my blog, I've used it for the ornaments between posts or sidebar links.
Add icons to hyperlinks, depending on where they point, like
a[href^="http://twitter.com/"]:before {
content: url('twitter-icon.png');
}
Adding a pointer to make a CSS-only speech bubble:
.bubble {
position: relative;
background: silver;
}
.bubble:after {
content: "";
border:10px solid transparent;
border-top-color:silver;
position: absolute;
bottom:-20px
}
And many, many other.
Just beware: If something is not presentational, it should probably be in your HTML. Users will not be able to select CSS generated content, and screen readers will ignore it.
You can also use a counter.
See http://www.w3schools.com/css/tryit.asp?filename=trycss_content_counter
You can also display a certain attribute of the element selected.
See http://jsfiddle.net/EcnM2/
You can also add or remove opening and closing quotes.
w3schools content property list: http://www.w3schools.com/css/pr_gen_content.asp
Generated content won't be perceived by screen readers so beware of accessibility issues.
content is very useful but there are cases where this text should be in the HTML code because it conveys information and isn't only decorative (a bit like background images in CSS vs informative img with a non-empty alt attribute)
:after and content can be used as a clearfix with no extra div
:before and :after bring multiple backgrounds (up to 3 w/ the element itself) to browsers that don't understand the CSS3 feature.
EDIT: forgot about Eric Meyer's article in A List Apart about printing the href attribute of links along with their text with the help of content (it was followed by a JS improvement, fyi)
Related
Here is the code I have a question about
.store {
display: block;
position: relative;
}
.store:before, .store:after {
display: block;
position:absolute;
content:'';
}
.store:before {
background: url(store-before.png);
height: 23px;
width: 54px;
top:-3px;
left:-3px;
}
.store:after {
background: url(store-after.png);
height: 20px;
width: 41px;
bottom:-3px;
right:-3px;
}
I noticed that when the "content" is anything besides two apostrophes, the before and after images don't show up. Can somebody explain the meaning of the two apostrophes? Thanks.
The Generated content, automatic numbering, and lists section of the CSS2.1 specification explains this:
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
content is what is added to the page. If no content is specified, nothing is added to the page at all (meaning that ultimately no styling gets applied). content: '' adds empty string content to the page.
The two apostrophes denote a string. Two double quotes denote a string as well, which delimiter you use depends on preference and escaping needs; see here for all the details.
If there's nothing between the two string delimiters, either '' or "", then you have an empty string. If you have anything besides a string, it's some other value which may or may not be valid. See here for all the possible values for content. If you pass an invalid value, then like any other style declaration the browser will ignore it, and without any valid value content will default to normal, which is really none for the :before and :after pseudo-elements. That will prevent your pseudo-element from displaying.
To use the before and after elements, it needs to have some form of content before it will show the element, so you can use an empty string to pretend to be something there, obviously a space or empty will show nothing on the page, so you just get the rest of your css styling.
If you remove the content property then it wont show at all.
Its meant to be used for things like "..." or "read more" I imagine without having to have that in your html markup.
Your particular code snippet is probably using it for clearing.
How ever you can use it to put repeating content next to elements like so:
span:before{
content:"Author: "
}
<span>Huckleberry Finn</span>
Will result in:
Author: Huckleberry Finn
I would like to apply a character to the end of some of my HREFs with CSS, and I found a way that works, but it applies the character to anchors as well. I don't want the character on my anchors. So far I can only get the property to apply to whole DIVs, I can't get it to stick to a simple class that I can selectively apply only to HREFs.
Here's what I have:
#sample a:after {
position: absolute; /* Prevent underline of arrow */
padding-left:2px; /* Add a little space between text and arrow */
content: "\00bb"; /* Unicode hex for » */
}
Any suggestions?
My DIVs do hold some link styling, will I need to move that? Example:
#sample a:hover {
color:#CCCCFF;
text-decoration:underline;
margin-top:20px;
}
My boss says: make all the links on the site have the character, except for the links we say should not have it. Of course he has no working example to show me.
Just use a[href] { this means target all anchor elements that have the href attribute set. More information can be found on the W3C specification.
Example.
HTML
link
<br />
<a id="anchor">anchor</a>
CSS
a[href]:after {
position: absolute; /* Prevent underline of arrow */
padding-left:2px; /* Add a little space between text and arrow */
content: "\00bb"; /* Unicode hex for » */
}
The most cross-browser way in general to refer to links in CSS is to use the :link and :visited pseudo-elements (representing unvisited and visited links, respectively) instead of the selector a:
#sample :link:after, #sample :visited:after
In this case, you can just as well use the simpler method of using an attribute selector, as you are using the :after pseudo-class too (and it has slightly less limited support than attribute selectors):
#sample a[href]:after
Simplest of all, do not use the a element for purposes other than links. The use of <a name=...> has been deprecated, in favor of using the id attribute on some natural element.
Addition: The question was also about preventing the arrow for selected links. This ca be implemented so that you indicate the selection using an attribute like class=noarrow on those links and add a CSS rule that sets the generated content to empty for them:
#sample :link.noarrow:after, #sample :visited.noarrow:after {
content: "";
}
This might be a better approach than using the :not(...) selector, due to issues in browser support. But on modern browsers, the following approach works, too: Instead of two rules, use just one rule that excludes the specific class:
#sample :not(.noarrow):link:after, #sample :not(.noarrow):visited:after {
content: "\00bb"; /* Unicode hex for » */
padding-left: 2px;
}
It’s a yet another question how to prevent the underlining of the arrow (the generated content). The trick used in the question does not seem to work on IE. Besides, it makes the arrow overlay text. I have no good answer to this issue, and I think it would best be discussed as a separate question (unless you can find it discussed in existing questions).
I'd add a class name to the anchors and over-write the declared CSS used on the links.
I'm wondering it if is possible to display text on a HTML page from a CSS file.
For example for a web host instead of having 100MB display on a plan upon 4 pages and not having to edit each one but the CSS itself.
For example:
CSS
100MB
and than in text
Our plan has {text from css displays here}
Thanks
You can use the :after pseudoselector. Suppose your "our plan has" part has an ID planid, and your HTML looks like this:
<div id = "planid">Our plan has</div>
Then you can do this in the CSS:
#planid:after {
content: ' 100MB'; /*what the element will contain*/
display: inline; /*it's inline*/
/*more styling*/
}
The :after selector creates a pseudo-element after the selected element. To create one before it, use the :before selector.
Little demo: little link.
Used to after before properties
yes do this as like this
HTML
<div>Hello</div>
Css
div:after{
content:'100mb';
}
live demo
more info
you can do this using pseudo elements like :after - http://jsfiddle.net/spacebeers/LQy7T/
.your_class:after {
content: "YOUR TEXT";
color: red;
background: blue;
display: inline;
}
CSS is not designed to do that kind of work, it's for organizing styles and not for managing contents.
What you need is a variable to store your value and then show it many times. So you need PHP, JS, Ruby, Java or your favourite language.
I'm working on a site which has line breaks inserted as <br> in some of the headings. Assuming I can't edit the source HTML, is there a way with CSS I can ignore these breaks?
I'm mobile optimising the site so I don't really want to use JavaScript.
With css, you can "hide" the br tags and they won't have an effect:
br {
display: none;
}
If you only want to hide some within a specific heading type, just make your css more specific.
h3 br {
display: none;
}
Note: This solution only works for Webkit browsers, which incorrectly apply pseudo-elements to self-closing tags.
As an addendum to above answers it is worth noting that in some cases one needs to insert a space instead of merely ignoring <br>:
For instance the above answers will turn
Monday<br>05 August
to
Monday05 August
as I had verified while I tried to format my weekly event calendar. A space after "Monday" is preferred to be inserted. This can be done easily by inserting the following in the CSS:
br {
content: ' '
}
br:after {
content: ' '
}
This will make
Monday<br>05 August
look like
Monday 05 August
You can change the content attribute in br:after to ', ' if you want to separate by commas, or put anything you want within ' ' to make it the delimiter! By the way
Monday, 05 August
looks neat ;-)
See here for a reference.
As in the above answers, if you want to make it tag-specific, you can. As in if you want this property to work for tag <h3>, just add a h3 each before br and br:after, for instance.
It works most generally for a pseudo-tag.
If you add in the style
br{
display: none;
}
Then this will work. Not sure if it will work in older versions of IE though.
This is how I do it:
br {
display: inline;
content: ' ';
clear:none;
}
You can use span elements instead of the br if you want the white space method to work, as it depends on pseudo-elements which are "not defined" for replaced elements.
HTML
<p>
To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>
CSS
span {white-space: pre;}
span:after {content: ' ';}
span.line-break {display: block;}
span.line-break:after {content: none;}
DEMO
The line break is simply achieved by setting the appropriate span element to display:block.
By using IDs and/ or Classes in your HTML markup you can easily target every single or combination of span elements by CSS or use CSS selectors like nth-child().
So you can e.g. define different break points by using media queries for a responsive layout.
And you can also simply add/ remove/ toggle classes by Javascript (jQuery).
The "advantage" of this method is its robustness - works in every browser that supports pseudo-elements (see: Can I use - CSS Generated content).
As an alternative it is also possible to add a line break via pseudo-elements:
span.break:before {
content: "\A";
white-space: pre;
}
DEMO
For me looks better like this:
Some text, Some text, Some text
br {
display: inline;
content: '';
}
br:after {
content: ', ';
display: inline-block;
}
<div style="display:block">
<span>Some text</span>
<br>
<span>Some text</span>
<br>
<span>Some text</span>
</div>
For that you can just do like this:
br{display: none;}
and if it is inside some PRE tag, then you can and if you want the PRE tag to behave like a regular block element, you can use this CSS :
pre {white-space: normal;}
Or you can follow the style of Aneesh Karthik C
like :
br {content: ' '}
br:after {content: ' '}
I think you got it
As per your question, to solve this problem for Firefox and Opera using Aneesh Karthik C approach you need to add "float" right" attribute.
Check the example here. This CSS works in
Firefox (26.0) , Opera (12.15), Chrome (32.0.1700) and Safari (7.0)
br {
content: " ";
float:right;
}
I hope this will answer your question!!
While this question appears to already have been solved, the accepted answer didn't solve the problem for me on Firefox.
Firefox (and possibly IE, though I haven't tried it) skip whitespaces while reading the contents of the "content" tag. While I completely understand why Mozilla would do that, it does bring its share of problems.
The easiest workaround I found was to use non-breakable spaces instead of regular ones as shown below.
.noLineBreaks br:before{
content: '\a0'
}
Have a look.
Yes you can ignore this <br>.
You may need this especially in case of responsive design where you need to remove breaks for mobile devices.
HTML
<h2>
Where ever you go <br class="break"> i am there.
</h2>
CSS for mobile example
/* Resize the browser window to check */
#media (max-width: 640px)
{
.break {display: none;}
}
Check out this Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM
You can usedisplay:contents
br {
display:contents;
}
see https://developer.mozilla.org/en-US/docs/Web/CSS/display-box
[display:contents;] These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes [...] most browsers will remove from the accessibility tree any element with a display value of contents. [...] no longer be announced by screen reading technology.
You can simply convert it in a comment..
Or you can do this:
br {
display: none;
}
But if you do not want it why are you puting that there?
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.