Tips for wrapping text around the bullet symbol

Is it possible to achieve text wrapping away from the bullet using a custom pseudo-element instead of list-style-position: outside? 

div {
  width: 250px;
}

ul {
  padding: 10px;
  list-style: none;
}

ul>li::before {
  padding-right: 10px;
  position: relative;
  top: 5px;
  font-size: 2em;
  content: "\2022";
  color: #fee100;
}
<div>
  <ul>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
    <li>VLorem Ipsum is simply dummy text of the printing.</li>
  </ul>
</div>

htmlcsshtml-listslistitembulletedlist

Answer №1

Instead of using relative positioning, you can opt for absolute positioning with negative values:

div {
  width: 250px
}

ul {
  padding: 10px;
 list-style: none;
}

ul>li {
 position:relative;
}

ul>li::before {
  padding-right: 10px;
  position: absolute;
  left:-15px;
  top:-10px;
  font-size: 2em;
  content: "\2022";
  color: #fee100;
}
<div>
  <ul>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
    <li>VLorem Ipsum is simply dummy text of the printing.</li>
  </ul>
</div>

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

Handling forms in PHP

Can you explain the functioning of isset($_POST['submit']) in detecting the submit button click? What is the purpose of naming each input element with artist[] and using square brackets? Is an array being defined in HTML? I heard that the name ...

phphtml

Array containing radio buttons with identical names

Creating a form that generates a dynamic list of items and allows users to give each item a score from 1-5 can be tricky. Each item represents a database insert in one table, linked through the same id in another table. The challenge is ensuring that all r ...

phphtmlinput

Is it possible to adjust CSS values in a relative manner?

#bar{font-size:14px;} The font size of #bar is set to 14px. #foobar{font-size:$-2px} // Fictional code The font size of #foobar is now 12px. (calculated as 14px - 2px) Is there a way to dynamically alter the value of a selector like this? ...

htmlcss

The dropdown menu in the navigation bar is overlapping with the datatable, creating a transparency effect

Working on a website layout that features a navbar at the top and a datatable below. However, when hovering over the navbar to reveal subitems, I notice a transparency issue where the navbar overlaps with the datatable. Below is a simplified version of my ...

javascripthtmlcssdatatables-1.10

The circles on Google Maps are not perfectly round in shape

I am attempting to overlay multiple circles on a Google Map, with the goal of having many circles per rooftop. While using the Circle class works well for larger circles, I'm encountering an issue where smaller circles appear distorted and not perfec ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

What is the best way to turn off autocorrect in a textarea on IE11 without turning off spellcheck?

In my experience, disabling the spellcheck attribute seems to solve the auto-correct issue, but it also eliminates the underlining of misspelled words. <textarea id="TextArea1" spellcheck="false"></textarea> I prefer to keep spellcheck enabl ...

javascripthtmlinternet-explorer

The jsonGenerator is unable to process strings containing spaces

Hey, I'm having trouble passing a string with whitespaces to my JavaScript function using jsonGenerator. Here's the code snippet: jGenerator.writeStringField(cols[8], ap.getContentId() != null ? "<img src='img/active.png' onclick=au ...

javajavascripthtmljson

Give a CSS Element a specific class

Can all h3 elements be styled with the class responsive-heading using only CSS? Take a look at the CSS snippet provided for more clarity: h3 { .responsive-heading } /* The responsive-heading class is defined in another CSS file and includes: .respons ...

javascripthtmlcss

Designing a responsive navigation bar with slide functionality for both web and mobile interfaces utilizing Bootstrap

I have integrated Bootstrap 4.5.0 with the necessary CSS and script from the CDN on my webpage. I am attempting to create a responsive navigation bar header similar to the one on the Bootstrap website, which functions effectively on both desktop web browse ...

htmlcsstwitter-bootstrapbootstrap-4header

What is a way to arrange elements on top of each other without any overlap, without resorting to the "position: absolute" property?

Is there a way to make this design responsive with dynamic scaling? My primary concern is managing the positioning of the meter scales without having to use absolute positioning. The main question here is: how can I stack elements on top of each other with ...

htmlcssfrontendweb-frontend

Ensure each alternate div has a unique background hue

While attempting to use CSS to assign a different background color to every second div element, I encountered an issue where both divs were affected when using (odd) and none when using (even). How can this be explained? .hoverDiv:nth-child(odd) { ba ...

htmlcss

Execute a function on each item within a JavaScript array

I'm working with a JavaScript array and trying to figure out how to display each item in the array within an h1 element. Can anyone help me out? This is what I have come up with so far: names = ["Jeff", "Steve", "Bill"]; function show() { let c ...

javascripthtml

I am looking to update the image on my website periodically

For instance, you can showcase image1.jpg for the initial 10 seconds followed by image2.jpg for the subsequent 10 seconds. <HTML> <body> <img src="image1.jpg" aftersometime='this.src="image2.jpg"' /> <!-- --&g ...

javascripthtml

Design a styled rectangular tab using CSS

Does anyone know of any cool CSS techniques for achieving the tabbed rectangle appearance depicted in the image below? While it's clear that accomplishing this with just one div is not possible, is there a more efficient method than layering one div ...

csstabs

Firefox experiencing glitchy rotation in CSS animations

I attempted to create a rotating div using a simple code snippet: <!DOCTYPE html> <html> <head> <style> .spinner { width: 100px; height: 100px; margin: auto; border-radius: 50%; border-bottom: 1px solid #f00; animation ...

htmlcss

Getting a PHP variable in a modal window can be achieved by using AJAX to

Currently, I am using a Bootstrap modal popup window which includes a button and URL. <a href="#" data-toggle="modal" data-target="#applynowModal" data-id="'.$row['id'].'" class="btn action_button but_apply">Apply Now</a&g ...

phphtmlmodal-dialogbootstrap-modal

Selenium: Perform a click action on a button enclosed within a "<div><a></a></div>" tag

I attempted to click on a button and encountered this structure: https://i.sstatic.net/GyGk3.jpg <div class="button-wrapper" id="button-verify-wrapper"> <a x-ng-click="verifySfdcConnection()" class="clearfix float-left button-green"> ...

javascriptjqueryhtmlseleniumselenium-webdriver

I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the ...

htmlcssimage

Having issues with X-UA-Compatible in Html 5 Reset (html5reset.org) site?

I have implemented the HTML 5 Reset template from a trusted source and encountered an issue with the X-UA-Compatible meta tag not functioning as expected. Here is a snippet of my header code: <!DOCTYPE html> <!--[if lt IE 7 ]> <html class= ...

htmlinternet-explorerhtml5boilerplatex-ua-compatible

Contingent creation of HTML

I am working on a logic that should display an error message in the form of a label when a certain condition returns false. So far, I have attempted to use Response.Write without success. if (bannedDomainText.Text.Contains(".")) File.AppendAllText(M ...

c#asp.nethtml