I'm attempting to display a mailto link. Is that possible with CSS?
html
<li class="fe footer_no_link"></li>
css
.footer_column .fe:after {content:"info#site.com"; }
you cannot add html elements with the CSS3 ::after or ::before selectors. The content:"" property will only accept plain text.
You must remember that CSS is for styling purposes only. This includes the ::before and ::after selectors.
Your best option is to use a JavaScript alternative.
Your value wasn't appearing because the speech marks needed escaping, or changing:
.fe:after {content:"<a href='mailto:info#site.com'>info#site.com</a>"; }
http://jsfiddle.net/Cb2ry/
Even then though, your content will just display as static text, rather than rendered.
Content added with the pseudo-element doesn't appear in the DOM, so no you can't.
But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file.
If the goal is to block spam, I usually use this piece of javascript:
var m;
m='in';
m+='f';
m+='o#exa';
m+='mpl';
m+='e.co';
m+='m';
$ele = document.getElementById('contact-mail');
$ele.href = 'mailto:'+m;
$ele.innerHTML = m;
The mail is splitted to be sure that it doesn't appear as an email in any file.
You can see the result here: http://jsfiddle.net/tzkDt/
This might be useful to someone...
Instead of inserting the link with the css, I coded it into the html with an href & class, but left it empty. Like this:
<p>This text is always here.</p>
<a class="mobile" href="mailto:info#site.com"></a>
.mobile:after {
content:'Click here to email us.'
}
That way the link doesn't appear (height:0, width:0) until it has content.
I used it for a responsive store locator where the map was stacked on top of the location list at small screen sizes, necessitating a link to the list anchor. I considered it a "design" decision, which is the only justifiable reason to do it.
You can't add html to the content in css. Unless you escape everything.
http://jsfiddle.net/PDTng/
Alternatively, you could use jQuery and use .html(), eg:
http://jsfiddle.net/PDTng/1/
Related
Title says it all.
I'm well aware on how to do it with css but is there a way to remove the underline without using CSS ? (we're restricted on using CSS for this project)
Need to do it with pure html (no css, javascript, etc.).
You could achieve this with jQuery, but all links will be affected by this method.
For example:
$(document).ready(function() {
$("a").css({"text-decoration": "none"});
});
If you only want to remove the text-decoration of certain links, I would use inline-styling.
Like this:
Your link
An inline style would be useful if you are limited to the CSS. Something like:
Link
Another method would be to dynamically load a style with jQuery:
<script>
$(document).ready(function(){
$('a').css('text-underline','none');
});
</script>
Ideally it would be better to do this in the CSS file but this can help.
Well, first, you never said you were dealing with text. If you were, a very round-about way of doing it would be making the text an image instead and then linking the actual image.
can anyone explain to me what does (content: "\f01a"; ) on css means? and how to use it?
I'm having a problem locating this icons on my css file, I don't know were to find it, I've tried searching some solutions on google but it only makes my self confuse.
if only someone could explain it to me. Thanks.
It's mean: fa-arrow-circle-o-down. It's used with Font Awsome plugin for displaing "font-icons". For use it you must read the documentation.
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.
<< FOR MORE INFO >>
With the content command, css will write the text which is given into the html element.
The \f01a is a Unicode Symbol in Hexadecimal. I think you have to embed a given font, so the icons will be displayed.
content property sets text to the element. It works with pseudo selectors only.
You can set any text.
It can be used to set icons.(icons but not images, using different fonts).
More info here.
These are content values for showing respective icons in your website.
You can use it like this,
.element:before {
content: "\f01a";
}
I have the next two elements on an HTML file:
<a id="a1" href="?cssfile=css-folder/015/styles.css">Style number 015</a>
<div id="a1Preview"></div>
The first one (anchor) is a reference to a CSS that will be loaded dynamically by the page. The second one (div) pretends to be a preview (thumbnail) of the style sheet.
THE PROBLEM IS I need a way to set the div background dynamically from the CSS, something like:
#a1Preview
{
background: url(css-folder/{"015" extracted from the <a> element}/preview.png);
}
Is this possible? Any ideas? Of course the HTML is untouchable. I can only change the CSS.
Thanks in advance.
You could use jQuery to change the css content dynamically. jQuery is a extension to javascript. From there you could then use the system you use to skin, but generally to extract href attributes from tags and change CSS, you can use such a thing.
I have textBox by default it has got background image, now I am able to remove the image on focus using CSS, but once the focus is not there image appears, so how to remove this image when then the box is not empty. I prefer doing this using CSS rather than JavaScript or jQuery.
I know you said you wanted to use css only but I can't think of a way to do this without using either js or doing it serverside with PHP (which is probably not an option)
with jquery you can simply use this check:
if($('#id_of_box').html() == "") { change css here }
You have to combine special CSS Selectors.
CSS 3 includes a ":empty" selector.
http://www.w3schools.com/cssref/css_selectors.asp
Especially each image that contains the text and icon are displayed using background-image in CSS (using CSS Sprites), so there is no even alt or title if the image
had been shown using <img>. So, pure image in this case. How can actual text be added (or using some other mechanism) for search engines to better index these tabs?
You'd use an 'image replacement technique':
http://www.mezzoblue.com/tests/revised-image-replacement/
Just use actual relevant text in each element and use text-indent:-9999em; to shift it offscreen. This may involve extra styling such as display:block on the element if it's normally inline for text-indent to work but you'll end up with basic a CSS image replacement implementation.
You should absolutely be using text somewhere, at least an alt tag.
Try a something like <span>Text</span> with text-indent:-9999px;, or any of the other variations of css text hiding/masking.
There may be some merit to adding the title attribute to those tabs as well.
If you use a <span> and set its display to none via CSS, then you can put whatever text in there you like for SEO.
This is done on i.e. <h3> tags on the css Zen garden. A number of them use this construct:
<h3>
<span>The Road to Enlightenment</span>
</h3>
...where you then give the <h3> a CSS background-image and set the <span>'s display to none. You should be able to use the same type of idea for tabs that use images.