How to Add a Number line to your Code Using Only CSS

So in this article I will be showing you how to add a numberline to the code or script that you are showing between <pre></pre> tags on your website, using only css. It took me a while to figure out how, but thanks to the /r/web_design subreddit I was able to figure out how with their help.

If you are using Jetpack, you need to insert this code into your custom .css

.post-content pre {
    white-space: pre;
    -webkit-box-shadow: .1em .1em .5em rgba(0,0,0,.45);
    -moz-box-shadow: .1em .1em .5em rgba(0,0,0,.45);
    box-shadow: .1em .1em .5em rgba(0,0,0,.45);
    position: relative;
    padding-left: 3em;
    overflow-y: hidden;
}

.post-content pre:before {
    height: 100%;
    color: #ABABAB;
    position: absolute;
    left: 2px;
    width: 25px;
    white-space: pre-wrap;
    direction: rtl;
    overflow: hidden;
    content: '1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9 \a 10 \a 11 \a 12 \a 13 \a 14 \a 15 \a 16 \a 17 \a 18 \a 19 \a 20 \a 21 \a 22 \a 23 \a 24 \a 25 \a 26 \a 27 \a 28 \a 29 \a 30 \a 31 \a 32 \a 33 \a 34 \a 35 \a 36 \a 37 \a 38 \a 39 \a 40 \a 41 \a 42 \a 43 \a 44 \a 45 \a 46 \a 47 \a 48 \a 49 \a 50 \a 51 \a 52 \a 53 \a 54 \a 55 \a 56 \a 57 \a 58 \a 59 \a 60 \a 61 \a 62 \a 63 \a 64 \a 65 \a 66 \a 67 \a 68 \a 69 \a 70 \a 71 \a 72 \a 73 \a 74 \a 75 \a 76 \a 77 \a 78 \a 79 \a 80 \a 81 \a 82 \a 83 \a 84 \a 85 \a 86 \a 87 \a 88 \a 89 \a 90 \a 91 \a 92 \a 93 \a 94 \a 95 \a 96 \a 97 \a 98 \a 99 \a 100 \a 101 \a 102 \a 103 \a 104 \a 105 \a 106 \a 107 \a 108 \a 109 \a 110 \a 111 \a 112 \a 113 \a 114 \a 115 \a 116 \a 117 \a 118 \a 119 \a 120 \a 121 \a 122 \a 123 \a 124 \a 125 \a 126 \a 127 \a 128 \a 129 \a 130 \a 131 \a 132 \a 133 \a 134 \a 135 \a 136 \a 137 \a 138 \a 139 \a 140 \a 141 \a 142 \a 143 \a 144 \a 145 \a 146 \a 147 \a 148 \a 149 \a 150 \a 151 \a 152 \a 153 \a 154 \a 155 \a 156 \a 157 \a 158 \a 159 \a 160 \a 161 \a 162 \a 163 \a 164 \a 165 \a 166 \a 167 \a 168 \a 169 \a 170 \a 171 \a 172 \a 173 \a 174 \a 175 \a 176 \a 177 \a 178 \a 179 \a 180 \a 181 \a 182 \a 183 \a 184 \a 185 \a 186 \a 187 \a 188 \a 189 \a 190 \a 191 \a 192 \a 193 \a 194 \a 195 \a 196 \a 197 \a 198 \a 199 \a 200 \a 201 \a 202 \a 203 \a 204 \a 205 \a 206 \a 207 \a 208 \a 209 \a 210 \a 211 \a 212 \a 213 \a 214 \a 215 \a 216 \a 217 \a 218 \a 219 \a 220 \a 221 \a 222 \a 223 \a 224 \a 225 \a 226 \a 227 \a 228 \a 229 \a 230 \a 231 \a 232 \a 233 \a 234 \a 235 \a 236 \a 237 \a 238 \a 239 \a 240 \a 241 \a 242 \a 243 \a 244 \a 245 \a 246 \a 247 \a 248 \a 249 \a 250 \a 251 \a';
}

First note that the in the content: part, you can generate how ever length of numbers you need using Java:

Java for loop make numerline

And copy and paste the numbers in between two single comments '' of content:'' .

Second, you might need to change .post-content name to fit your website’s theme. You can check using inspect element:

Inspect Element to find name before pre tag
So I am using inspect element to find the parent element that is before the pre tag. In this case it is .post-content

That’s it. Please tell me what you think, if I can improve anything else, or it I missed anything! Down below is an example of the numberline:

1 overflow-y: hidden; makes sure that the numberline isn't seen below the content-box of the <pre></pre> tags

Edit: Now I use the Crayon Syntax Highlighter plugin instead. It takes care of all the highlighting, editing, and multitudes of small details when it comes to displaying code; it even detects the type of programming language that you are using. I highly recommend it :D

What's Your Opinion?