Adding Bullet Icons to the Beginning of Every Text Line: A Step-by-Step Guide

Dealing with an online store, I'm facing issues with the styling of some items.

The products come with individual attributes listed one after another in this format:

<b>Brand:</b> 
<span itemprop="brand">Cosmetal</span> 
<br>

<b>Configuration:</b> 
<span class="editable" id="attribute-values_129_value" title="">Under Counter</span>
<br>

Is there a way to add a bullet icon before each line of text since they can't be enclosed within a p tag or any other element?

Appreciate any guidance!

Niki

cssformatting

Answer №1

You have the ability to utilize css in order to arrange the span elements to appear as list items:

.add-bullets span {
    display: list-item;
    list-style-type: disc;
    margin-left: 25px;
}
<div class="add-bullets">
  <b>Brand:</b> 
  <span itemprop="brand">Cosmetal</span> 
  <br>

  <b>Configuration:</b> 
  <span class="editable" id="attribute-values_129_value" title="">Under Counter</span>
  <br>
</div>

It should be noted that I enclosed that block within a div element with the add-bullets class so only the span elements within that div will be formatted as list items (and not all span elements on your page).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with IE 11: Including card image inside anchor tags in Bootstrap 4 causes unwanted white space

I'm having an issue with my Bootstrap 4 card markup where the image is wrapped inside an anchor tag. The problem arises when viewing it in IE 11, as there is a large white space underneath the image, while everything displays fine in Chrome, Edge, and ...

htmlcssbootstrap-4

What could be causing my tabs to shift to the vertical side when using large, larger, and wide screens?

In my previous research, I came across a question similar to mine: Pure CSS accordion not working within CSS tabs. The solution mentioned works perfectly on monitors of any size, but the difference lies in the use of the a element. In their code, setting t ...

htmlcss

If the parent class in HTML has a class of "active," then use jQuery to

I have attempted this, but unfortunately did not achieve the desired result. I am just brainstorming my ideas here. HTML <html> <div> <div class="spinner"> </div> </div> </html> Jquery if (".spinner"){ th ...

javascriptjqueryhtmlcss

Hover effect with diagonal movement

I'm attempting to recreate the unique diagonal arrow animation featured on this website: For reference, here is a small boilerplate: https://jsfiddle.net/randal923/x0ywchq5/8/ Any advice on the best way to position and animate the arrow would be gre ...

css

Ensure that the two background images are identical in size and content

Can someone assist me with achieving vertical equality for two background images like in this example image? Currently, I have the following styling applied: background-repeat: no-repeat, repeat-x, repeat-y; background-position: 925px center; However, t ...

cssimageimage-scaling

A secondary operation is triggered in the simulated keyboard when the enter or space key is pressed, even when it is not warranted

In my HTML, I have created a simulated keyboard with buttons that correspond to characters. When you click on these buttons, the character is added to a text element on the screen. Additionally, you can use your physical keyboard to input characters in the ...

javascripthtmlcss

The React Bootstrap Open Iconic library is displaying a peculiar 'T' symbol instead of the intended icon

I have recently installed Bootstrap and the package react-open-iconic, but I am having trouble getting it to work properly. Within the code, the following snippet is being used: if (sortColumn.order === "asc") return <TextIcon className="oi sort-as ...

cssreactjsbootstrap-4iconsiconic

Scrolling issue while appending jQuery to a div within another div

After utilizing an AJAX request to pull in JSON content, I encountered an issue where appending it to a nested div resulted in an inactive scrollbar - it appeared but could not be used. <style> .tbox { width:440px; height: 500px; ba ...

jqueryhtmlcssajax

Ways to conceal li and label elements without relying on a class or ID or utilizing a commonly shared class or ID

Is there a way to hide the li and label elements from a page without specific IDs or classes? <li><a href="https://www.test.com/feature/%d8%ac%d9%85%d8%b9-%d8%a7%d9%84%d8%a7%d9%86%d9%85%d8%a7%d8%b7/"><i class="fa fa-check" ...

css

Excessive Header Length Exceeding Page Limit

I've been struggling to pinpoint the reason why my page is displaying with a longer header than the actual page length. Even after adjusting the header size to be less than 100%, there is still excess white space overflowing beyond the edge of the pag ...

htmlcss

What might be the reason behind the failure to implement my color class on the text within the <p> element?

I'm looking to streamline my stylesheet to easily change the color of different text elements. I've created a list of general colors that can be applied using classes, like (class="blue") . Here are some examples: .dark-grey { color: #232323; } ...

htmlcss

Determining parent height through the positioning of children

When it comes to CSS, it's truly fascinating until you hit a roadblock and the "aha moment" seems elusive. Today, I'm struggling with adjusting the height of my parent div that contains a relatively positioned element. The issue arises from the ...

htmlcsscss-position

I am facing an issue where the text on my website is failing to display properly

I am facing an issue where the text on my website renders normally on Android or Windows, but when I run it on iOS, the text disappears completely. It's as if all the text has been set to display: none; The other elements seem to be tucking in just fi ...

htmlcssiostext

Developing pill-shaped input fields in React Native: A step-by-step guide

I need help creating "dynamic pills" in React Native and Redux, similar to the ones showcased below: https://codepen.io/silkine/pen/pPxJOX <div id="container"></div> <div class="tim">this codepen is dedicated to <a href="h ...

javascriptcssreactjsreact-nativeuser-experience

offsetWidth varies across different browsers

There seems to be a 1px difference in the value of element.offsetWidth between Firefox and Chrome. I have been researching this issue. I attempted to apply a CSS reset and moved the element further away from the screen borders (as older versions of IE wer ...

javascripthtmlcss

Samsung devices exclusively showcase background in responsive design

I am encountering a major problem with my website design, specifically with its compatibility on mobile devices. To ensure its responsiveness, I have tested the design on my iPhone, iPad, and Windows Phone. Unfortunately, since I lack an Android device, I ...

androidhtmlcssbrowser

HTML/JS Implementation: Back to Top Visual Element

- This website appears to be quite simple at first glance. However, I have encountered an issue where every time I scroll down and then click on the "About" menu option, it abruptly takes me back to the top of the page before displaying the section with a ...

javascriptjqueryhtmlcss

Automatically adjust CSS grid to fill based on the width of child elements

Can a CSS grid adjust its widths dynamically based on the content of its children? I believe not, but I wanted to confirm. I attempted this approach without success. const Grid = styled.div` display: grid; grid-auto-flow: row; grid-template-columns ...

csscss-gridstyled-components

The background color appears to be fixed in place even after attempting to switch it to

I've been using a plugin for my camera functionality and I need to set the background color to transparent in order to display it properly. However, when I close the camera preview, the background remains transparent which is causing an issue. Is the ...

htmlcsscordovaionic-frameworkionic2

Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

I'm in the process of creating a website with a prominent jumbotron section on the landing page. I am looking to adjust the height of the image within the jumbotron without cutting off any parts of the picture, and I do not want it to scroll to displa ...

htmlcssbootstrap-4