CSS to align text to the right side

I'm having a CSS issue that I've been struggling with. Despite spending ample time trying to complete the task, I find it too challenging. Now, I turn to all of you (webmasters/developers) for help in solving this problem.

Could you please take a look at this image and advise me on how to align the second line of text for bullet points numbered (3, 5, 6, 8) so that it starts at the same horizontal position as the first line?

Below is the CSS code for the sidebar:

.plugins ul{padding-left:0;counter-reset:plugincount;}

.plugins ul li{border-bottom:1px dashed #ddd;line-height:20px}

.plugins ul li:before{content:counter(plugincount);counter-increment:plugincount;margin-left:-10px;margin-right:1px;background:#8FC93E;border-radius:25px;border:1px solid #000;color:#fff;font:bold 16px georgia;padding:.3em .6em}

..plugins ul li{border-bottom:1px dashed #ddd}

.plugins ul li a{margin-left:10px;}

.plugins ul li a:hover{text-decoration:none}

.plugins ul li:hover,.plugins ul li:hover{border-bottom:1px dashed #696969}

You can find the original website link here: Urgentfiles.com

htmlcsssidebar

Answer №1

To ensure the bullets are positioned outside of the li content, you can use the following CSS code:

ul li { list-style-position: outside; margin-left: 1em; }

Answer №2

Here is the link to check out the code: http://jsfiddle.net/jhkb5jrb/1/

body {
  counter-reset: my-counter; /* Original */
}

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 300px;
   counter-reset:plugincount; /* Updated */
}
ul li:before {
    background: #8fc93e;
    border: 1px solid #000;
    border-radius: 100%;
    color: #ffffff;
    content:counter(plugincount); /* Updated */
    counter-increment:plugincount; /* Updated */        
    float: left;
    font-family: Georgia;
    font-size: 16px;
    font-weight: 700;
    list-style-type: none;
    margin-right: 15px;
    padding: 0.3em 0.6em;
    position: relative;
}
ul li{        
    padding: 0.7em 0;
}
ul li a{
    text-decoration: none;
    color: #000000;
}

Answer №3

if you want to keep this code structure

adjust

.plugins ul li {position: relative; padding-left:40px /* increase padding more than circle */;
.plugins ul li::before {position: absolute; top: 0; left: 0; margin:0 /*remove margin*/

however, I believe modifying the HTML markup is a preferable solution

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

I encountered an issue while iterating through Object HTMLDivElement and applying ChileNode style z-index, resulting in an undefined output in both Firefox and Chrome browsers

function adjustPosition(currentDiv) { try { for (var i = 0; i < document.getElementById("parentContainer").childNodes.length; i++) { document.getElementById("parentContainer").childNodes[i].style.zIndex = 0; ...

javascripthtmlcss

Portfolio displays with overlapping div elements

While working on my portfolio, I ran into an issue. It is built using the isotope filter to categorize projects. The problem arises during initial loading, as the portfolio elements overlap instead of being neatly arranged in a 4-column grid. After selec ...

htmlcssoverlap

Unexpected Display Issue with Angular Select Option

My goal is to implement the Select-Option Input as depicted in the first image link here: https://i.sstatic.net/SVT8R.png However, my current output looks different and I suspect that there may be a conflict between two CSS libraries. It's worth noti ...

cssangularbootstrap-4angular-materialbootstrap-5

Understanding the Contrast between Relative Paths and Absolute Paths in JavaScript

Seeking clarification on a key topic, Based on my understanding, two distinct paths exist: relative and absolute. Stricly relative: <img src="kitten.png"/> Fully absolute: <img src="http://www.foo.com/images/kitten.png"> What sets apart R ...

javascripthtmlcss

`The ng-binding directive seems to be malfunctioning while ng-model is functioning properly

Currently, I am in the process of learning how to utilize Angular (1.3.10). My objective is to create two input fields that will specify the suit and value for a hand of playing cards. In my attempts to achieve this, I have encountered an issue. When I man ...

javascripthtmlangularjsangular-ngmodelng-bind

What's the best way to position a lone CTA at the center of the second row on a two-column layout using Elementor?

On my page, I am facing a challenge of adding a second section with a single Call to Action (CTA). The previous section on the same page consists of two CTAs placed side by side with a width set at 50% each. However, now I need to add a third CTA without i ...

csswordpresselementor

Manipulating the DOM results in the SWF being reloaded

Currently, I am utilizing jQuery to insert an SWF into the DOM. However, when the SWF loads and I attempt to clone or wrap it, the SWF ends up reloading. Preventing this reload is crucial for me. Here's an example: $('#test9').before(&apo ...

javascriptjqueryhtmldomflash

Concealing Redundant Users in Entity Framework

I am faced with the task of sorting through a database containing over 4000 objects, many of which are duplicates. My goal is to create a new view that displays only one instance of each element based on the first and last name. I have already implemented ...

javascriptjqueryhtmlentity-framework

Is it possible to execute ng-repeat on-click when ng-show evaluates to true?

I am currently facing an issue with my table that populates using ng-repeat. The table contains 100 rows, and clicking on any row reveals a new table (using ng-show) with more detailed product information. However, the performance of my web app is being af ...

javascripthtmlangularjsangularjs-ng-repeat

Can a collection of HTML elements be grouped together for synchronized movement?

When the browser size is adjusted or viewed on different devices, it is necessary for a group of related HTML elements to stay together and move as a block. This means that if one element moves to the next "row" due to lack of space, all elements should sh ...

csshtml

Tips for Bridging the Space in a Horizontal Bootstrap Card

I'm in the process of designing a website that features a horizontal bootstrap card. I'm trying to figure out how to make the image on the left side of the card fill the full height of that section. Here's the code I'm working with: & ...

htmlcssbootstrap-4

Setting a background image for your Ionic page

I am relatively new to using Ionic and I'm currently working on setting up a gradient image as the background for the welcome page of my app. While I've been successful in loading images from the assets/imgs folder on other pages, I'm facing ...

htmlcssionic-framework

When you have a target element that is deeply nested, consider using a 50% height relative to

There is some confusion surrounding the issue below: <div class="container"> <div class="row"> <div class="group"> <a> <div class="col-lg-3 full-h"></div> </a> <a> < ...

htmlcssheight

Adjusting Width with Javascript

My goal is to specify the width of a RadNumericTextBox that appears as an input element on the page using JavaScript. I have managed to set the width, however, the telerik controls come with built-in JavaScript functions that reset the input element' ...

c#javascripthtmlasp.nettelerik

One effective method for populating my form following the retrieval of JSON data

Currently, I am working on a VueJs project where I am fetching data from a Mysql database using Axios. My next step is to implement an edit option for user profiles. I am wondering what the most efficient method is for populating the form with the fetche ...

javascripthtmlvue.js

Apache Wicket - Utilizing HTML5 details element within a RepeatingView to save open property

In my repeatingview, I have HTML5 detail elements that can be opened or collapsed by the user. However, when I remove certain elements from the repeatingview and then reload it using target.add(container), all elements end up being collapsed again. How c ...

javahtmlwicket

Easily transform a CSS file for optimal use on dark backgrounds from scratch

I've got around 200 CSS files that look like this: /** * GeSHi Dynamically Generated Stylesheet * -------------------------------------- * Dynamically generated stylesheet for bnf * CSS class: , CSS id: * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 ...

phpcssalgorithm

Enhance your UI experience with a beautifully styled button using Material-

I was using a Material UI button with a purple background. <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', heig ...

javascriptcssreactjstypescriptstyled-components

troubles with compatibility between bootstrap.css and IE11

I am currently developing a web application using AngularJS and bootstrap.css. While everything appears fine on Chrome, I am facing some formatting issues on both Firefox and IE11. HEAD <head> <meta charset="utf-8"> <meta http-equi ...

javascriptangularjshtmltwitter-bootstrap-3

What is preventing me from applying styles to the first word in my Angular ngFor iteration?

I'm currently attempting to customize the initial word of a string within my Angular ngFor loop. Strangely, the class gets applied but the style defined in my CSS file is not. Inline styling also does not seem to work - any ideas why? This is the CSS ...

htmlcssangulartypescript