when traversing a set of data obtained from PHP in a HTML tag, the pseudo element added to the tag becomes invalid .
I added nth-child (1):: after & first-child::after ) to show only the first one in the reference diagram, but the actual project added pseudo-class elements for each tag.
the following is the example code:
HTML
the html code you generate, compare it with
it is more obvious to look at the generated code. The selector of css is simply .timeline .timeline-item:nth-child (1):: after . Generally, when using nth-child, the default is that many elements are juxtaposed together to have the order of 1, li, 3, and 4, but the selector is not juxtaposed, but is contained in the a tag, so here comes the problem: you use the include selector to accurately hit li,. But because li is nth-child (1) in every a tag, each li hangs an after pseudo element.
therefore, it is recommended that the li and a tags be swapped and written into a more complex standard ul > (li > a > {$month}) * n structure.
Previous: Laravel 5.4 pagination combined with asynchronous sorting?
Next: The problem of rendering list exception in elementUI table