Skip to content

Instantly share code, notes, and snippets.

@gnclmorais

gnclmorais/80_char_limit.commented.css

Last active July 5, 2017 17:07
Show Gist options
  • Save gnclmorais/4e014098f47d81625afba43c2627fdd6 to your computer and use it in GitHub Desktop.
Save gnclmorais/4e014098f47d81625afba43c2627fdd6 to your computer and use it in GitHub Desktop.
Download ZIP
CSS-only ruler for GitHub diff
Raw
80_char_limit.commented.css
.code-review::after {
/** Make the pseudo-element visible: */
content: '';
/** Replicate the font style the <td> element is using: */
font-size: 12px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
/** Replicate the left padding the <td> element has: */
margin-left: 10px;
/** Setup actual positioning of the element: */
position: absolute;
top: 0;
bottom: 0;
left: 81ch; /* Don't forget GitHub adds a + or - before */
right: 0;
/** Finally, apply styling: */
border-left: 1px solid darkred;
background: rgba(0, 0, 0, 0.2);
}
Raw
80_char_limit.css
.code-review::after {
content: '';
font-size: 12px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
margin-left: 10px;
position: absolute;
top: 0;
bottom: 0;
left: 81ch;
right: 0;
border-left: 1px solid darkred;
background: rgba(0, 0, 0, 0.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment