For print styles, I am currently printing the url after the text.
Is it possible to have it appear on the next line instead of next to the text?
This is what I have so far.
a:after {
content:" (" attr(href) ")";
}
Result:
Email me(hello#email.com)
Want this instead:
Email me
(hello#email.com)
Example: http://jsfiddle.net/qesRk/
Try this -
a:after {
font-style: italic;
content: "\A and some text after."; white-space:pre;
}
Demo
You could display: block; it, like on this JSFiddle
There are various ways to make the :after pseudo-element start on a new line, as shown in other answers. But the example in your question says that the desired rendering is
Email me
(hello#email.com)
This cannot be achieved using just CSS if the the purpose is to that the address from the href attribute of a link. The reason is that a working href value would have to start with mailto:, and you cannot omit anything from the attribute value when using constructs like attr(href). What you can achieve is
Email me
(mailto:hello#email.com)
For this, given the markup Email me, you would use
a:after {
content: " (" attr(href) ")";
display: block;
margin-top: 1.2em;
}
assuming that you want an empty line too, as in your example. Replace 1.2 by the line-height value you are using.
P.S. This sounds unnecessarily complicated anyway. Using just the email address in content, optionally wrapped inside an a href element, would suffice, both on screen and on print. (On printing, you would normally want to suppress underlining of links, but that’s a general issue.) If you were thinking of preventing email address harvesters from getting the address from the content, putting the address into an attribute does not help much (they are easily processed by harvesters).
Related
I was just working on a site where we had to add the ability to print the pages. We noticed that the link URLs are plastered all over the page like bad graffiti.
After reading this answer, it seems clear that some framework I'm using (which isn't bootstrap or foundation, maybe material.io?) must be adding this in.
Why would this be a good idea? It seems that if the user wanted to print the page, they want a print out of what they are seeing, not a bunch of other random garbage. Googling around I mostly find lots and lots of articles about how to stop this behavior so at the very least it seems like something people are looking to get rid of by default rather than add.
My question is, who thought it was a good idea in the first place to deliberately add this, and why?
Also, if this question is better on another stack, let me know.
Many frameworks use an #media print query in the CSS to display the underlying URLs of the links on the page when the page is printed. The purpose of this is to display the URLs of the links on the page so readers can see/visit the links, if needed.
To do this, the CSS will contain an #media query along the lines of:
#media print{
a:after{
content:" (" attr(href) ") ";
}
}
which has the effect of (emulated to work in the browser here):
body {
font-family: Arial;
}
a {
text-decoration: none;
color: blue;
}
/*
This would be #media print to work for print
Using #media screen here for demo purposes
*/
#media screen {
a.print:after {
content: " (" attr(href) ") ";
}
}
<strong>Screen</strong>
<p>View the answer on <a class="normal" href="https://stackoverflow.com/questions/48529735/why-would-a-css-framework-display-link-urls-on-the-print-pages?noredirect=1#">Stackoverflow.com</a>.</p>
<br/>
<br/>
<strong>Print</strong>
<p>View the answer on <a class="print" href="https://stackoverflow.com/questions/48529735/why-would-a-css-framework-display-link-urls-on-the-print-pages">Stackoverflow.com</a>.</p>
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'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?
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)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm looking for any suggestion/rules/guides on making a decent print css for when a webpage is printed. Do you have any to offer?
Here are some general print styles to use to get better print outs:
/* Print styles */
#media print
{
tr, td, th {page-break-inside:avoid}
thead {display:table-header-group}
.NoPrint {visibility:hidden; display:none}
a {color:#000000}
}
The top one prevents page breaks inside of a table row
The thead style makes any rows in the thead tag repeat for each page that the table spans across.
NoPrint is a class I use to show something on the screen, but not in print.
And, I like to turn off link colors.
First read this article from A List Apart (http://www.alistapart.com/articles/goingtoprint/). They cover a lot of the basics you're looking for (expanded links, whitewashing, etc).
Don't rely on print preview, make sure to go through the entire process when testing a print layout. To save paper install SnagIt or use the Microsoft XPS document writer. You can print directly to an image and not waste any paper.
Also for long articles, consider changing your font to serif. Articles on the web are easiest to read in sans-serif (Arial, Verdana) but in print try Times New Roman or Georgia.
One thing that I make sure to put in my print style sheet is:
a[href^="http://"]:after{
content: " (" attr(href) ") ";
}
This writes the actual link next to link text so people who print the document will know were the link is suppose to go.
I also set my body text to be a little more readable for print:
body{
font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}
You have this old but still relevant article from Eric Meyer on a List apart.
The main point is to start afresh, explicitly setting borders and marging / padding to 0, white background, and "display none" to any non-essential elements for printing (like certain menus)
<link rel="stylesheet"
type="text/css"
media="print" href="print.css" />
body {
background: white;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent;
}
And go from there.
When you are defining the style of printing, you have to think on a paper and in physical units.
Set the margins in centimetres (inches) and the font sizes in points (just like in OpenOffice).
Create a class like 'screen' or 'noprint' to be able to easily remove unwanted
material.
Forget about fancy coloured text. Black text on white background.
Think about removing superfluous images -- they might not look that good in black and white
Remove underlining from links, and make links have sane text. It looks silly to read "check this page", where "this" is underlined. Or if you put the href of the link after underlined text, then it can be more useful but doesn't look so nice IMHO.
Watch out for background images and colors. I think IE's default behavior is not to printout background images or colors.