Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Faux Column Madness with a pseudo element Reply To: Faux Column Madness with a pseudo element

#158049
paulob
Participant

Hi,

For best results you would need to add an inner div into the cell and give that position:relative to do this properly although the padding on the cell will confuse things so its best to put the padding on the inner div instead to avoid rounding errors.

http://codepen.io/paulobrien/full/BajtA

You could do something without the extra div but it suffers from a pixel jog in Firefox. Instead of absolutely positioning the arrow you could float it with a negative margin which will effectively remove it from the flow but you will need to float one arrow from the left column and one arrow from the right column.

e.g.
.col-1:before, .col-2:before {
border:solid transparent;
content:””;
height:0;
width:0;
pointer-events:none;
float:right;
z-index:2;
position:relative;
}
.col-1:before {
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #f2f7fa;
border-style: solid;
border-width: 21px 0 21px 23px;
margin: 27px -4.4em 0 0;
z-index:3;
}
.col-2:before {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #c1c1c2;
border-style: solid;
border-width: 22px 0 22px 24px;
margin: 26px 0 0 -3.05em;
float:left;
}

It suffers from a pixel jog in Firefox hence the increase in size to cover the border.

You could also use the before and after elements on the h4 element instead but again suffers from a more uneven pixel jog in firefox.

You can’t absolutely place from table-cells as that is not defined in the specs so should be avoided as it is not supported by most browsers anyway. It is possible to absolutely place from the display:table element itself but that won’t really help as the cell size will not keep track with the percentage position via the parent and the arrow will be misplaced.