Two questions regarding display of text

Design help General
1

Hi

I would like to know how to enable the use of bullet points in a paragraph of text.
AFAIK the only way to do this currently is to create a list element.
But in my case i have a body of text where i would like a segment of text to be bulleted into a list.
How do i achieve this?

My second question is also related to text (i’m building a blog page in my site).
I noticed on a lot of sites these days their is an option for the user to click a ‘read more’ link which then expands the rest of the articles content out in full.
How do you achieve this in webflow ??

thanks

2
  1. You need only one section tu be bulleted? Or several sections in a row? If it’s several, it’s a list, and you shouldn’t be afraid of using the list component to do so, even if, in your mind, it’s not a list. Semantically, and regarding hierarchy, it’s a list. If you only need one occasional bullet point, style it like if it was a list bullet. When you custom style a list, the bullet is actually an image in the background of an element. So it’s a background image, set to no-repeat, with adjusted fixed position. Additionally, the text element gets a padding on the left to make room for the bullet. So yes it means your text will be indented. There is no way in CSS to display a background image outside of the element. If you need the text to keep the same left alignment than non-bulleted text, you need to make a div container, place your text in it, then your image. Set the container element to position:relative (has no visuel incidence) then set the bullet to position:absolute. Your bullet is now fixed positioned regarding the container. Adjust its position as desired. The rule here is : an absolute positioned element is positioned regarding its closest positioned parent. That’s why we set the container to position:relative, only for this rule to work.
  2. You achieve the read more expandable thing with Interactions. Design your thing as it was displayed. Then create an interaction on your read more link, an interaction that is going to affect the thing you want to display (so give a class name to this thing to be able to target it). Then you’re going to need to set the thing as display:none or opacity:0% for the starting state. The interaction will consist in changing the display or opacity property when the link is clicked. I could be more specific but I said enough for you to try it (: Come back here if you’re lost.
1 Like
3

I thought there was an example in the http://playground.webflow.com/ butit’s not the case. Can’t find a webflow example showcasing this. (the 2./ point)