I'm running into a bug in Microsoft Edge where <a> tags are unclickable. I've managed to distill it to the simplest example here:
a {
visibility: hidden;
display: inline-block;
}
a::after {
visibility: visible;
content: "more";
}
<span>
go!
</span>
If anyone has any ideas, I'd really appreciate it. Thanks!
Disclaimer: I'm using IE11 here, but it has the same problem you describe for Edge, so I hope this solution will work there too.
It's a bit of a hack though; if better solutions come up, I'll gladly delete this one.
a {
display: inline-block;
overflow:visible;
color:white; /* note: use current background color */
position:relative;
}
a::after {
color:black; /* note: use current foregound color */
content: "more";
position:absolute; left:0; top:0;
}
<span>
go!
</span>
Related
Googled myself stupid, still couldn't seem to find any information on it. Following issue:
Adding an ::after selector to a link adds it as part of the link. Is there a way that the ::after selector will not extend the link (be text only, not clickable)? See example, is there a way, that the "»" will not be part of the link?
Example:
a::after {
content: " »";
}
Test
Make its width 0 and add pointer-events: none;
a::after {
content: " »";
display:inline-block;
margin-left:8px;
width:0;
pointer-events: none;
}
a {
font-size:35px;
margin-right:20px; /* to avoid overflow issue and cover the area of the pseudo element */
}
Test some text after
I have a WordPress site in which we are replacing menu links with a background image. Here is an example of the css for one of the menu items.
#menu-item-3039{
width:30px;
height:20px;
border:none;
padding-right:0;
}
#menu-item-3039 a{
visibility:hidden;
}
#menu-item-3039 a::before{
visibility:visible;
display:block;
width:20px;
height:20px;
content:"";
background-size:20px 20px;
}
#menu-item-3039 a::before {
background-image:url("/wp-content/uploads/2015/05/moodle-icon.png");
}
Is there something very obviously wrong or missing to work with IE11?
It works just great in chrome and firefox, but does not work at all in IE11. I'm not very experienced with IE cross browser support, so it's likely that anything will help.
Thanks!
IE11 is inheriting the visibility from the a to their ::before.
I'd recomend you not to use that rule and use:
overflow: hidden;
text-indent: -1000px;
height: 20px;
display: block;
instead. This way you are hidding the text (what I think that is what you really want to do) and not affecting the background.
It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class).
Here is a JS Fiddle: http://jsfiddle.net/9N35f/
I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9.
The question:
Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+
Is there a bug report for this somewhere? Or is it actually by the standards?
I'm aware this is a rather elderly thread, but having just been up against this problem in IE 11, and unable to find much help, I decided to experiment. Aided by a significantly improved dev tools than in the earlier versions I managed to figure it out - for what I'm working on at any rate. Chances are it'll work for others as well, although you might need to tweak. YMMV.
The HTML:
<li>Whatever</li>
The CSS (edited after #frnhr pointed out that the initial version I posted didn't actually work):
a {
display: block;
position: relative;
padding-left: 15px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:before {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2px);
overflow: hidden;
content: ">";
}
The secret sauce is setting the height and the overflow: hidden; line; it means that the underline is still there but outside the viewport provided by pseudo element, and so never gets seen on screen. It also works across other browsers (tested on Chrome and Firefox as well). Depending on your existing styling you'll probably want to tweak the pixel value in the calc() value.
See http://jsbin.com/biwomewebo/1/edit?html,css,output
IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the CSS 2.1 spec, “User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.”
There does not seem to a bug a report on this at the IE Feedback Home.
In this case, a suitable workaround might be to use an image as the generated content:
a:before {
content: url(arrow.png);
}
where arrow.png refers to a suitable small icon. The use of url(...) in content is described in CSS3 Generated and Replaced Content Module, which is a seriously outdated draft (the last version is from 2003), but this part has been widely implemented in browsers. Not in IE 7, however. So if you wish to cover IE 7 as well, consider the approach in #EugeneXA’s answer, possibly generating the extra markup dynamically with JavaScript.
If the background is white you may use the bottom border:
a {
text-decoration: none;
border-bottom:1px solid blue;
}
a:before {
content: "> ";
border-bottom:1px solid white;
}
Not sure what standards say, but IE behavior seems to be more logical. Think of :before as an element inside of <a> tag, not outside of it. Child's text-decoration property should have nothing to do with its parent's.
This workaround will work
http://jsfiddle.net/9N35f/4/
<span>a link</span>
a {
text-decoration: underline;
}
span:before {
content: ">";
}
Another solution is to set a small line-height (heightdoes work too) and set overflow: hidden so the underline disappears.
I know this is not the best solution, because the line-height value depends on the character you use. In this case 0.6 is a good value but maybe not for another character.
In my case it was a good solution because I had the problem with only one certain character with a fixed font-size.
a {
text-decoration: underline;
}
a:before {
content: ">";
display: inline-block;
text-decoration: underline; /* simulate IE behavior */
line-height: 0.6; /* line-height must be smaller than font-size */
overflow: hidden;
}
JSFiddle Demo
This works for me:
html:
<span>a link</span>
css:
a {
text-decoration: none;
}
a span {
text-decoration: underline;
}
a:before {
content: ">";
}
In this the before tag is still part of the anchor.
I recently finished a website in wordpress and modified a template a bit.
Now my customer wants a element before a text-links, so i tried adding a :before as shown
a:before {
content:url('triangle.png');
width:3px;
height:5px;
margin: 5px;
}
what it does, works great so far:
But my problem is that I have image links on my site as well, and it crashes my layout.
Is it possible to apply the a:before only for the links in the textarea ?
have you tried following:
a:before > img {
content:"";
width:3px; /*maybe these styles are also not necessary for your layout*/
height:5px; /* then you can set them al to 0 */
margin: 5px;
}
I have this html code
<div id="mybox"> aaaaaaa </div>
and this is my css
#mybox{
background-color:green;
}
#mybox:hover{
background-color:red;
}
the question is how to hide the content of the div (aaaaaaa) when the mouse hover event by using css only and without changing the structure of the code
I think I should put some code under #mybox:hover but I don't know the code.
Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;
IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.
Really though, you're better off putting the text in some kind of element (like p or span or a) and setting that to display: none; on hover.
Here is the simplest way to do it with CSS3:
#mybox:hover {
color: transparent;
}
regardless of the container color you can make the text color transparent on hover.
http://caniuse.com/#feat=css3-colors
Cheers! :)
Hiding through CSS is achieved by using either the "visibility" or the "display" attributes. Though both achieve similar results, it's useful to know the differences.
If you only want to hide the element but retain the space occupied by it, you should use:
#mybox:hover {
visibility: hidden;
}
If you want to hide the element and remove the space occupied by it, so that other elements can take its space, then you should use:
#mybox:hover {
display: none;
}
Also remember that IE6 and below do not respond to :hover for anything except A tags. In which case, you'll need some Javascript to change the classname:
document.getElementById('mybox').className = 'hide';
and define the "hide" class in CSS:
.hide { display: none; }
sounds silly but font-size:0; might just work. It did for me. And you can easily override this with the child element you need to show.
You could make the text color the same as the background color:
#mybox:hover
{
background-color: red;
color: red;
}
What about opacity
#mybox:hover {
opacity: 0;
}
Best way to hide in html/css using display:none;
Example
<div id="divSample" class="hideClass">hi..</div>
<style>
.hideClass
{display:none;}
</style>
This is a late answer but still, guess setting the color to transparent is the best option.
#mybox:hover{
background-color:red;
}
There are many ways to do it:
One way:
#mybox:hover {
display:none;
}
Another way:
#mybox:hover {
visibility: hidden;
}
Or you could just do:
#mybox:hover {
background:transparent;
color:transparent;
}
#mybox:hover { display: none; }
#mybox:hover { visibility: hidden; }
#mybox:hover { background: none; }
#mybox:hover { color: green; }
though it should be noted that IE6 and below wont listen to the hover when it's not on an A tag. For that you have to incorporate JavaScript to add a class to the div during the hover.
I would say:
#mybox{
background:green;
}
#mybox:hover{
color:transparent;
}
<div id="mybox">
This text will disappear on hover
</div>
This will hide text, but of course, it still contains the text, but it is a tricky way to hide the text (make in invisible), but it will work well
Sorry to be 7 years late but this could be achieved by using the below:
.your-block{
visibility: hidden;
width: 0px;
height: 0px;
}
This will keep the content on the page and won't occupy any space whereas display:none will completely hide the content.
Using the above code can be useful if you need to reference code in a div but don't need it to display.
.button {
width: 40px;
height: 40px;
font-size: 0;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%20fill%3D%22%239299A6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") #f0f2f5 no-repeat 50%;
}
<button class="button">Поиск</button>