Hi …
I try something that @Jerry has recommended … first it works for me, but now I see that I get problems on mobile devices… I set a border on the left text side. Is there a way to fix this ?
Couch you help me please @Jerry
cheers
tom
Another easy way, especially if you don’t want to effect the box model is to use a box shadow or a pseudo element.
1 Like
Hi @Jerry @PeteSharp
thanks for the help. I try the pseudo element before … but dont get it to work. I have no idea how to become space between the pseudo element and the text …
I set a class on the text ( text-fx ) set it to relative … Set a class ( text-fx::before ) use absolut and do a red border on the left side … But dont get space between border and text … You have an idea ? When I use potion it always move both …
cheers tom
Use the position options on the pseudo element to set the spacing.
ok, is it important to set the class on relativ and absolute ? When I do so I use padding for the text to set it right I have to use a negative padding at the pseudo element … Is a negative value ok ?
What is the goal here? To set a border on the left of a text list?
On the pseudo element I would also set the height to 100% and the width to the size of the line you want. Eg 2px. And assign a background colour for the line.
Yes you can use negative values.
With this approach you can then make more creative designs. Eg set the height higher than 100% or less so the lines longer or shorter than your content.
The goal is to get a list with this rectangle. But only on the first line of text on smaller breakpoints …
Does it need to be the exact line-height of the text?
First time he’s mentioned that part 
There is a pseudo element called ::first-letter and it supports borders.
But you have to add it to the code editor. Unless the class editor will let you use it? I’m not sure if it will be sanitised.
Sry - my English ist not good. When I use only a border on the left side and the list has two lines it looks terrible - see the first screenshot in that post. I need that rectangle only on the first line of the text but still look like a list when you got more lines on smaller devices… I need this inside a slider …
Btw swiffy slider doesn’t work correct. I can’t click elements in the layer tree - sometimes blocs crash … is there an easy way to do a column slider ?!? It’s terrible to use swiffy at the moment. I does all I need - but it’s not working perfect
It’s been supported a while:
2 Likes