Please add a space after each bullet point within the <ul> <li> tags

Is there a way to add padding after the bullets in <ul> and <li> without affecting the appearance of the circles?

The HTML code in question is:

<div class="footer_ticker">
  <marquee behavior="scroll" direction="left" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">
    <ul>
      <li><a href="">See the latest from our COMMENTARY page....</a></li>
      <li><a href="">USDTRY - Tracking Channel Higher</a></li>
      <li><a href="">USDMXN - Demand accelerates after setback </a></li>
    </ul>
  </marquee>
</div>

Here is a demo showcasing the issue: -- https://jsfiddle.net/wd84undd/

Any assistance on this matter would be greatly appreciated. Thank you in advance.

jquerycss

Answer №1

For an improved look, consider including margin-right:3px; within the styling of footer_ticker ul li::before {

Answer №2

If you're looking to create some space between the bullet and the text, you can use margin or padding on the left side of your a tag.

.footer_ticker ul li::before {
  background-color: #60d9eb;
  border-radius: 7.5px;
  content: "";
  display: inline-block;
  height: 5px;
  vertical-align: middle;
  width: 5px;
}
.footer_ticker ul li {
  display: inline-block;
  font-size: 17px;
  list-style: outside none disc;
  padding: 0 10px;
  text-decoration: underline;
}
.footer_ticker ul li a {
  margin-left: 5px;
}
<div class="footer_ticker">
  <marquee behavior="scroll" direction="left" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">
    <ul>
      <li><a href="">See the latest from our COMMENTARY page....</a>
      </li>
      <li><a href="">USDTRY - Tracking Channel Higher</a>
      </li>
      <li><a href="">USDMXN - Demand accelerates after setback </a>
      </li>
    </ul>
  </marquee>
</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

Guidelines for choosing input using jQuery

I am looking to retrieve the value of an input using jQuery. Specifically, I need to extract the value of a hidden input with name="picture" when the user clicks on the حذف این بخش button by triggering the function deleteDefaultSection( ...

javascripthtmljqueryjquery-selectors

The Bootstrap Navbar causes the window to shift when it collapses

Everything described above takes place on mobile screens. The navbar code is as follows: <nav class="navbar navbar-dark sticky-top navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand&q ...

htmljqueryscrollbootstrap-5navbar

I am interested in incorporating jQuery into my React development project

I'm trying to implement jQuery in React. I have an input field in my project that I am using to create a match event with 'this.state.value'. When the content of the input field matches, I want the borders to turn green and red if they do no ...

javascripthtmljquerycssreactjs

Can one ascertain the cleared Kendo grid column filter using jQuery?

I am working with a kendo grid that has approximately 10 to 12 columns, each with its own filtering option. My current task requires me to identify when a column filter is cleared and determine which specific column triggered the event. Is there an event w ...

jqueryfilterkendo-grid

Jquery FullCalendar displaying incorrect date

I have recently set up a running jQuery FullCalendar and encountered an issue where the calendar is displaying the wrong day. Today is March 21, 2014 (Friday) but it is showing as Saturday (Sab in Italian). The version of FullCalendar being used is 1.6 (t ...

jqueryfullcalendar

"Applying a background color to a BorderPane element is successful when done inline, but encounters issues when

So I have a border pane and I am trying to set its background color to black using CSS. When I directly set the style inline, like this: borderPane.setStyle("-fx-background-color: black;"); it works perfectly fine. However, when I try to add a class s ...

javacssjavafx

Issue with jQuery getScript() not resolving

My current approach involves using jQuery's getScript() method to load individual javascript files. The loading process appears to be successful, as I receive an error when using an incorrect URL and no errors with the correct one. However, I am enco ...

jqueryjquery-deferredgetscript

Creating a unique WooCommerce product category dropdown shortcode for your website

I am having trouble implementing a WooCommerce categories dropdown shortcode. Although I can see the drop-down menu, selecting a category does not seem to trigger any action. Shortcode: [product_categories_dropdown orderby="title" count="0" hierarchical=" ...

javascriptphpjquerywoocommerceshortcode

Enhancing images by creating clickable sections in a more organized and efficient manner

Are there any other methods to make parts of an image clickable in a more organized way, aside from using the coordinates method or directly embedding images from Photoshop? <script> new el_teacher = ["candice","john"]; $(".teacher1").mouseenter(fu ...

javascriptjqueryhtmlcssclickable

Making a request for the identical page, however, with varying query string parameters

When requesting the same page in two different tabs, such as abc.aspx?id=param1 and abc.aspx?id=param2, how does the ASP.NET server interpret this? Does it see it as one request to the same page or as two requests to different URLs? I am using parameters t ...

c#jqueryasp.netpostbackpageload

Creating an engaging Uikit modal in Joomla to captivate your audience

I need help optimizing my modal setup. Currently, I have a modal that displays articles using an iframe, but there is some lag when switching between articles. Here is the JavaScript function I am using: function switchTitleMod1(title,id) { document.g ...

javascriptjqueryhtmlcssuikit

maintaining the alignment of three div elements

I am struggling to keep three divs side by side within a container, each containing an image and text below it. I had this layout working perfectly before, but now the right div falls underneath the other two when the screen size is reduced, followed by th ...

htmlcss

Dealing with CSS specificity issues when incorporating material-ui for React into a WordPress plugin

Struggling to integrate material-ui for react in a wordpress plugin due to conflict with wordpress's styling in forms.css file. Looking for a solution that doesn't require complete restyling of material-ui components to override the default style ...

cssreactjswordpressmaterial-uicss-specificity

A variety of menu items are featured, each one uniquely colored

In the user interface I developed, users have the ability to specify the number of floors in their building. Each menu item in the system corresponds to a floor. While this setup is functional, I am looking to give each menu item a unique background color ...

javascriptjquerycssrandomcolors

Altering the width of an unordered list (<ul>) to fit menu items with the help of jQuery

I had previously asked a question that I need further assistance with: Fitting a <ul>'s width to accommodate the menu items Is there a way to use jQuery to adjust the width of each <ul> within a specific parent <ul> so that the <l ...

jqueryhtmlcssxhtmlmenu

Intersection Observer API is not compatible with the functionality of the navigation bar

Having trouble with the Intersection Observer API. Attempting to use it to show a nav-bar with a white background fixed to the viewport once it scrolls out of view. Initially tested using console.log('visible') successfully to determine visibili ...

javascriptcssintersection-observer

Tips for adjusting the size of nav-pills when collapsing with bootstrap 5

I'm attempting to utilize Bootstrap to create active classes that display a nav-pill/container around the active section of my webpage. It works well on larger screens, but on smaller screens with the hamburger menu active, the nav-pill stretches acro ...

htmlcssbootstrap-5

Leaflet - Discovering markers already on the map and removing them: A comprehensive guide

I recently started using leaflet for my open source mapping project. You can check it out here: Below is the jQuery code that I used to create markers on the map when clicking on it: map.on('click', onMapClick); function onMapClick(e) { ...

jqueryleaflet

center text vertically in HTML list

Here at this festival, you'll find a unique menu on the sidebar. The menu is created using an HTML list with the following structure: <ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="index.html"><i ...

htmlcsstwitter-bootstrap

Adding spacing breakpoints in Material-UI 5 sx properties

Currently in the process of updating my components to utilize the latest MUI version. I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion. However, one thing that concerns me is handl ...

cssreactjsmaterial-ui