I had a narrow sidebar with a bunch of links that I wanted to format with bullets. This was done with the :before pseudo-element.
The problem was that when the links were long they were breaking into multiple lines. Changing the element a to display:block helped the alignment but the :before content was pushing the first line to the right.
The solution was to give the :before element a position:absolute which made it neutral to the links position:
The CSS for the links:
|
1 2 3 4 5 6 |
a{ color: #0986e3; display: block; padding-left: 6px; padding-bottom: 4px; } |
The CSS for the :before element (bullet):
|
1 2 3 4 5 6 7 8 9 10 |
a:before{ content: " "; display: inline-block; width: 4px; height: 4px; background: black; vertical-align: middle; margin: 6px 0 0 -8px; position: absolute; } |