How to add a right (vertical) hairline to side-panel?

Documentation states:

“bottom” and “right” hairlines are made using :after pseudo elements

but how can I add a right (vertical) hairline to side-panel? (or even a list) using the pseudo-element?

I think the Hairlines documents are in relation to elements which have existing hairlines. I don’t believe Side Panels do.

You’d be able to write your own CSS to provide hairlines.

Sorry - the question was a bit unsharp: It’s more like:

How can I add a right (vertical) hairline to a supported element using the pseudo-element? :wink: (I just understand how to differenciate ‘bottom’ and ‘right’ here…

and: which elements support vertical hairlines?

you can start with this

<div class="selector"></div>

.selector {
  width: 100px;
  height: 100px;
  position: relative;

.selector::after {
  content: '';
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--f7-list-border-color);
1 Like

That’s something else.

Maybe I mis-read the docs, but for me it looked like I can attach the ‘hairline’ already out of the box:

As opposed to drawing a line with a fixed width like in your snippet - or even:
calc(1px / var(--f7-device-pixel-ratio)), drawing using transforms give nicer results on retina displays.

But my (new) guess is, that documentation just shows how to remove the hairline, in case it is already attached… - so I mis-read the documentation.

@nolimits4web Maybe it would be a good idea to add a sentence, that this part of documentation is meant for existing elements only.

thx anyway

Yes, this part of docs only how to handle existing hairlines.

P.S. iOS (if that is the case) supports fractional border so you can just do border-right: 0.5px solid or border-left: 0.33px solid, etc.

@nolimits4web thx - but I’m on MacOS X and Windows… and there fractional borders don’t work :frowning: