Customize bullet list icons to adjust in size based on content using css

Question

Customize bullet list icons to adjust in size based on content using css

In my CMS project, the CMS team has a special requirement regarding unordered and ordered lists. They want the size of the bullet list icon to adjust according to the text content within the list.

The image below shows the default design of a list item:

https://i.sstatic.net/kiaSF.png

However, in the image below, the size of the bullet list icon remains constant even if the text inside the list has a larger font-size:

https://i.sstatic.net/rLwyS.png

https://i.sstatic.net/amTxt.png

I have attempted to fix this issue with the following code, but it did not work:

ul {
    li {
        position: relative;
        list-style-type: none;
        padding-left: 9/@rem;
        &::before {
            content: "\2022";
            color: @primary-c1-hex1;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -28/@em;
            padding-right: 11/@em;
            transform: scale(0.8);
        }
        >h6, >strong  h6, > b h6 {
            display: inline-block;
        }
    }
}

How can I make the size of the bullet list icons dynamic using CSS? If CSS alone is not sufficient, is there a workaround using JavaScript?

javascript jquery html css

Answer 1

Answer №1

Typically, the size of list bullets adjusts to the font size of the parent element automatically. It appears that your CMS editor may not be adjusting the font size of the li or ul elements directly, but instead wrapping a container around the content (a common practice among many editors). You can try this code:

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

<ul style="font-size: 2em;">
    <li>One</li>
    <li>Two</li>
</ul>

… but it seems like your CMS is doing this:

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

<ul>
    <li><span style="font-size: 2em;">One</span></li>
    <li>Two</li>
</ul>

Check out this fiddle to see how it works.

If you want more control over the position and color of the circles, you could use something like this. However, if your editor handles text formatting differently, this approach might not be helpful as it relies on the parent's size and color just like native CSS bullets do.

I suggest reviewing the syntax generated by your CMS editor.

Answer 2

Typically, the size of list bullets adjusts to the font size of the parent element automatically. It appears that your CMS editor may not be adjusting the font size of the li or ul elements directly, but instead wrapping a container around the content (a common practice among many editors). You can try this code:

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

<ul style="font-size: 2em;">
    <li>One</li>
    <li>Two</li>
</ul>

… but it seems like your CMS is doing this:

<ul>
    <li>One</li>
    <li>Two</li>
</ul>

<ul>
    <li><span style="font-size: 2em;">One</span></li>
    <li>Two</li>
</ul>

Check out this fiddle to see how it works.

If you want more control over the position and color of the circles, you could use something like this. However, if your editor handles text formatting differently, this approach might not be helpful as it relies on the parent's size and color just like native CSS bullets do.

I suggest reviewing the syntax generated by your CMS editor.

Customize bullet list icons to adjust in size based on content using css

Answer №1

Similar questions

Identify the moment all Dropzones are added to a form

Complete and submit both forms during a single event

Exploring the process of constructing this form with the assistance of Bootstrap

Is there a dynamic element that cannot be accessed in the rest of the DOM?

Obtaining the attribute value of a disabled element in an Angular JS application

Variations in the appearance of scrollbars on the x-axis and y-axis within a single <div> element

Ways to implement CSS styling to every input element excluding inputs located within list items of a specific class

Having trouble with AngularJS not sending form values properly?

Using JavaScript ES6, we can access a specific array nested within a JSON array and loop through its elements by utilizing the

JavaScript: A guide to solving systems of equations

Exploring the angular js repeater component's context menu options

Enhancing the functionality of an existing framework through the integration of a

Including additional data to a page after each iteration in order to display the current progress

Is there a way to adjust user privileges within a MenuItem?

Tips for maintaining the original height of an image within an <img> element using HTML and CSS

Utilizing Fullcalendar v5's sticky header feature alongside a Bootstrap fixed top navigation bar for a seamless

Combining jQuery event handlers for two specific DOM elements into a single line

Shaky parallax movement

After removing an item from the array, React fails to display the updated render

What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page