Not Your Typical Horizontal Rules
The default browser style for
is so weird. It’s basically:
border-style: inset;
border-width: 1px;The default border-color is black, but the border doesn’t actually look black, because the inset border “adds a split tone to the line that makes the element appear slightly depressed.”
If I kick up the border-width to 40px you can see it more clearly:
I often reset an
to be “just a line” and it always gets me because I’ll try something, like height: 1px with a background at first, but that’s not right. The easier way to clear it is to turn off all the borders then only use border-top or border-bottom. Or, turn off all the borders, set a height, and use a background.
Annnyway… Sara has some of the nicest horizontal rules in town on the current design of her site, and she’s written it all up. Guess what? They aren’t even
elements! It turns out the only styling hook you have is CSS, which wasn’t as adaptive as Sara needed, so she ended up with a
The best way to get the full flexibility of an SVG is by inlining it. But the
element is content-less — it has no opening and closing tags within which you can place other elements.
The only way to work around the limitations of
while preserving semantics for screen reader users is to use a
divand provide the semantics of anhrusing ARIA.
Direct Link to Article — Permalink
The post Not Your Typical Horizontal Rules appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
