Absolute positioning changes between browsers when using pseudo-elements
I am changing the download link to display two icons above it (using pseudo-elements and icon font). These icons should be layered.
To do this, I gave the link a position: relative
, and the second icon (which I position on top of the first) gets position: absolute
. Then I just adjusted the values top
and left
until it sat where I wanted.
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body {
/* just to make sure everything fits on screen */
padding: 100px;
text-align: center;
}
.download {
position: relative;
color: #000;
text-decoration: none;
}
.download::before {
display: block;
content:'\f1c1';
font-family:'FontAwesome';
font-size: 42pt;
margin-bottom: 10px;
}
.download::after {
position: absolute;
display: block;
content:'\f019';
font-family:'FontAwesome';
font-size: 28pt;
top: -40px;
left: 50%;
margin-left: 5px;
}
<a href="#" class="download">Download PDF</a>
In Chrome, it works fine. The download icon is located directly above the lower-right document icon. However, in firefox, the download icon is above the document icon. I suspect this is the result of a pseudo-element, which is not technically a DOM child of the element a.download
, although this example (which does not use "t use pseudo-elements) has the same positioning problem.
How are browser implementations implemented position: absolute
in conjunction with pseudo-elements and how can I get around this?
source to share
I think I have.
The tag <a>
crashes on Chrome, but on Firefox it is given a field. It seems the best option would be to give the tag <a>
incorrectly padding-top
to bring the text down and also position the acrobat icon completely. I'm not really sure how to make it not crash on Chrome
Example: http://jsfiddle.net/5jn9yw7s/
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body {
padding: 100px;
text-align: center;
}
.download {
position: relative;
color: #000;
text-decoration: none;
}
.download::before {
position: absolute;
display: block;
content:'\f1c1';
font-family:'FontAwesome';
font-size: 42pt;
top: -52pt;
left: 50%;
margin-left: -21pt;
}
.download::after {
position: absolute;
display: block;
content:'\f019';
font-family:'FontAwesome';
font-size: 28pt;
top: -32pt;
left: 50%;
}
<a href="#" class="download">Download PDF</a>
source to share
In firefox, the absolute positioning of pseudo-elements is ignored and treated as two relative elements. You can install a Firefox fix for this by adding this to your css:
@-moz-document url-prefix() {
.download::after {
top: 0;
left: 0;
margin-left: 5px;
margin-top:58px
}
}
Play with the fields for the best result.
source to share