I can't get the value of an element on an HTML page

Question

I am extracting data from this page. I am able to get all the information I need, except for the "rank" of each story within the top 100 (i.e. the number on the left of each element title.) When I inspect the element in Chrome, I cannot find any HTML code that writes the number to the page and the numbers don't seem to be images. In the HTML source the element that points to the number is "::before":

<li class="bucket-item">
<div data-post-id="dfa6bc73bd8a" class="post-item post-item-small post-status-">
::before <!-- this is what points to the number of the page-->
...

Is there a script or an image that represents the rank of the post in the top-100 that I am missing?

Answer 1

Setting aside the question of whether what you're doing violates Medium's ToS, ::before is a CSS pseudo-element. It doesn't appear in the HTML markup, but acts like a virtual element, injected before a particular selector's element, that you can apply styles to.

In this case, the selector is .ordered-posts .post-item-small:before, so the pseudo-element is inserted before each .post-item-small that appears inside an .ordered-posts element.

Psuedo-elements are often used in conjunction with CSS generated content, which can add some stuff to display inside the pseudo-element. In this case, the content is generated from a CSS counter which increments each time a matching element appears, so the list appears to be numbered! And if you reorder it, you don't have to worry about updating all the numbers; the counter handles that for you automatically. Pretty cool!

Here's a good reference for the ::before pseudo-element, and a good write-up of the CSS content property.

And just for fun: a great post on some cool stuff you can do with pseudo-elements.

Answer 2

According to the stylesheet, apparently it uses some sort of counting mechanism:

content: counter(posts-counter) ". ";
counter-increment: posts-counter;

If your extracting mechanism is extracting the stories in order, could you add a counter that increments up 1 after each story is extracted? That's probably your best bet, as each number relies on the previous one.