I'm trying to get speechmarks to appear at the start and end of a quote.
Here's a link to the code (without images):
http://jsfiddle.net/tomperkins/cGDUc/
You can see the grey blocks (I've replaced the speechmark images with grey blocks in this case) I have at the start and end of the quote. The trouble is the closing quote sits on the right hand side.
I'd like the closing speechmark (or grey block) to sit straight after the quote. In this example it would come straight after '...expectation'
All help and tips appreciated!
Thanks in advance,
Tom Perkins
HTML
<h2>On all levels they exceed our expectation</h2>
CSS
h2:before {
content: "“";
}
h2:after {
content: "”";
}
Alternately, you can use images:
h2:before {
content: url(imgsrc);
}
h2:after {
content: url(imgsrc);
}
Highly simplified example: http://jsfiddle.net/cGDUc/14/
Related
I am looking to present a set of properties. key: val type-of-thing. Not knowing any better, I am laying it out in a table.
The following css:
table.properties td:first-child {
text-align: right;
}
table.properties td:first-child::after {
content: ":";
}
aligns the text in the 1st column (the keys) to the right, then appends a semicolon.
Is there a way to express that in a more concise way? Like in a single rule? Or maybe such presentation is better done in another manner altogether?
Appreciate a tip!
.newclass {
content: "\00A9";
}
In the above code, a copyright icon shows up. I have a question and a requirement.
Question - Where is this icon come from? any image from my pc, internet or some other way.
Requirement - If I have to introduce a new code, and associate a new icon for that code, how to do it?
It's an unicode escape sequence,
here you can find some examples:
http://css-tricks.com/snippets/html/glyphs/
these works with pseudo elements and are unicode characters.
http://codepen.io/anon/pen/EFAtk
there a list here : http://unicode-table.com/en/
HTML test
©
<p> #
http://unicode-table.com/en/</p>
CSS test
:before {
color:red;
}
body:before {
content: "\00A9";
}
p:before {
content:'\0040';
}
I have a page where I don't have access to html who content this:
<span id="page_title_text">Welcome - Overview</span>
and I would like get this:
<span id="page_title_text">Overview</span>
Due to the fact I cannot simply modify the text in the code itself, I wondering if is possible to hide the text "Welcome -" with css only (I have access to css related file).
Any suggestion ?
thank
You can just update the text or do an actual replace:
Update Text
document.getElementById('page_title_text').innerHTML = 'Overview' ;
Replace
document.getElementById('page_title_text').innerHTML =
document.getElementById('page_title_text').innerHTML.replace(/Welcome -/,'');
jsFiddle
#page_title_text:before {
content: "Welcome - ";
}
People don't seem to be understanding your question...
I'm not sure if this can be accomplished elegantly.
You can try something "hacky" like this though:
#page_title_text {
position:absolute;
top: -15px;
width: 70px;
}
#page_title_text:first-line {
color:white;
}
JSFiddle
Of course this answer assumes existing styling etc. And it doesn't get rid of the textual content as well. There are just ways to hide it (with coloration or positioning etc.)
is there a way with pure css to Have a link that might say "New! Watch Video" and then once someone has clicked the link have it remove the "New" portion of the link. I'm assuming this can be done w/ Jquery but I'd like to see if there is an way to remove it with just css.
Rather than removing words, add the word "New" if the link hasn't been visited yet
a:before {
content: "New! ";
}
a:visited:before {
content: "";
}
No extra markup, and you don't need to put the word "New" everywhere.
Wrap the "New!" in a span inside the anchor:
<a class="newText" href="somepage.html"><span>New! </span>Watch video</a>
and in your CSS, set:
a.newText:visited span { display: none; }
I would recommend using a class on the anchor (like "newText" above) so that this formatting will only be applied to the links you want it on. And keep in mind that the "New!" text will reappear if the user clears their browser history.
Assuming the anchor will take you to a new page you can use the following technique:
a:before {
content: "New! ";
}
On any page you wish to remove or change it, you can add a body class
body.blah a:before {
content: "";
}
I've got CSS on my links depending what type of link it is. In this case it's password protected, and external link.
So I've got CSS like this:
a.external-link:after { padding-left: 2px; content: url(../images/icon-external-link.gif); }
a.restricted-link:after { padding-left: 2px; content: url(../images/icon-lock.png);}
However when I try something like this:
<a class="external-link restricted-link" href="some link">Some Link</a>
It only displays the last icon, in this case the icon-lock.png. Which makes sense, since the content value can only be set once not combined, so the last class declaration is overwriting it. Is there anyway to combine these two so I can mix and match these link classes easily (I've got 4 total). I don't want to make separate classes/images for each combo.
Hate to break it to you, but you're going to have to make separate classes/images for each combo. Especially as there would be no way of knowing which content should go first.
a.external-link.restricted-link:after
{
content: url(ext) url(res);
}
vs
a.external-link.restricted-link:after
{
content: url(res) url(ext);
}