Adding border (divider) lines between unsemantic columns

I have 2 rows of 2 columns in a section using unsemantic:

<div class="grid-50 1st-col">1</div>
<div class="grid-50 2nd-col">2</div>
<div class="grid-50 3rd-col">3</div>
<div class="grid-50 4th-col">4</div>

I want to have some sort of dashed border "divider" lines between the columns, one horizontal and one vertical, so it looks sort of like this (but without the gaps of course):

1st | 2nd
--------------
3rd | 4th

I believe the best way is to use the CSS ::before and ::after. Attempted some myself but couldn't get it to work. Digging a bit in browser's developer tools, it seems Unsemantic added some of its own ::before and ::after styles that may cause some conflicts.

Any idea how to achieve this with the least hassle?

Thanks.