Ensure text within list items is positioned properly and not obscured by any decorative elements

I'm struggling to create top-bottom borders for list items with customized decorations. The text of the element should not be hidden under the decoration even if it's too long. Any ideas on how to achieve this?

div {
   width: 20%;
 }
 
 ul {
   list-style-position: inside;
   list-style-type: none;
 }
 
 li {
   border-top: 1px solid;
   padding: 0.1em 0.3em;
 }
 
 li span {
   position: relative;
   left: 1em;
 }
 
 li::before {
   content: "\2022";
   color: #800000;
   font-size: 1em;
   vertical-align: middle;
   line-height: 1em;
   width: 10px;
 }
 
 li:last-of-type {
   border-bottom: 1px solid;
 }
<div>
   <ul>
     <li><span>foo</span></li>
     <li><span>bar</span></li>
     <li><span>very long sentence is here which should be nicely aligned</span></li>
   </ul>
 </div>

Check out this JSFiddle Link

htmlcss

Answer №1

To achieve the desired outcome, simply set the position of your pseudo elements to absolute:

div {
  width: 20%;
}

ul {
  list-style-position: inside;
  list-style-type: none;
}

li {
  border-top: 1px solid;
  padding: 0.1em 0.3em;
}

li span {
  position: relative;
  left: 1em;
}

li::before {
  content: "\2022";
  color: #800000;
  font-size: 1em;
  vertical-align: middle;
  line-height: 1em;
  width: 10px;
  position: absolute;
}

li:last-of-type {
  border-bottom: 1px solid;
}
<div>
  <ul>
    <li><span>foo</span></li>
    <li><span>bar</span></li>
    <li><span>very long sentence is here which should be nicely aligned</span></li>
  </ul>
</div>

Answer №2

div {
  width: 20%;
}

ul {
  list-style-position: inside;
  list-style-type: none;
}

li {
  border-top: 1px solid;
  padding: 0.1em 0.3em;
  display: flex;
}

li span {
  position: relative;
  /* left: 1em; */
  width: fit-content;
}

li::before {
  content: "\2022";
  color: #800000;
  font-size: 1em;
  vertical-align: middle;
  line-height: 1em;
  width: 10px;
}

li:last-of-type {
  border-bottom: 1px solid;
}
<div>
  <ul>
    <li><span>apple</span></li>
    <li><span>orange</span></li>
    <li><span>mango is a delicious fruit that people enjoy eating</span></li>
  </ul>
</div>

Answer №3

You mentioned wanting borders on the top and bottom of the li elements, but upon reviewing your code, I can confirm that it is already implemented and working correctly.

Regarding alignment, if you prefer the content to appear in a single line format, you can achieve this by making the following adjustments:

div {
  width: 20%;
}

ul {
  list-style-position: inside;
  list-style-type: none;
}

li {
  border-top: 1px solid;
  padding: 0.1em 0.3em;
}

li span {
  position: relative;
  left: 1em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

li::before {
  content: "\2022";
  color: #800000;
  font-size: 1em;
  vertical-align: middle;
  line-height: 1em;
  width: 10px;
}

li:last-of-type {
  border-bottom: 1px solid;
}
<div>
  <ul>
    <li><span>foo</span></li>
    <li><span>bar</span></li>
    <li><span>very long sentence is here which should be nicely aligned</span></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

What could be causing disparities in the padding of certain table cells compared to others?

If you're interested, I created a photo gallery over at Take a look around and feel free to download any wallpapers that catch your eye! The issue I'm encountering is with the padding of the columns - specifically, the first and last columns ha ...

phphtmlcssgallerycss-tables

How to use JQuery to parse an external JSON file with array elements in Javascript

My goal is to extract information from an external JSON file using JavaScript, specifically an array and other elements. The JSON file I am working with is called 'TotalUsers.json' {"@version":"1.0", "@generatedDate":"12/20/10 5:24 PM", "day":[{ ...

javajavascriptjqueryhtmljson

What could be causing the issue with the focus not being activated when clicking on the input field in Vue?

I am facing an issue where I have to click twice in order to focus on a specific input field, and I'm having trouble setting the cursor at the end of the input. I attempted to use $refs, but it seems like there may be a deeper underlying problem. Any ...

javascripthtmlvue.js

Redirect the Submit button to the specified URL from the form element

Looking for a way to create a form with two fields: Username and Password. Upon clicking submit, the username and password should be added to the URL in a specific format. For instance: The URL structure will remain the same, only the "username_entered_i ...

javascriptphpjqueryhtml

Is there a way to process the output of phantom.js in PHP efficiently?

I have successfully retrieved output from a phantom.js request via the command line and it meets my expectations. Now, I am interested in invoking phantom.js from a php script and then analyzing the output for specific content. My phantom.js script appear ...

phphtmlparsingphantomjsoutput

Arranging inline-flex elements within a div container

I have been struggling to position two elements side by side within a single div, where the second element should be on the right side. <div className={classes.container}> <div className={classes.first}> First </div> <d ...

cssflexboxmaterial-ui

Customizing Bootstrap tooltip appearances with CSS

After successfully setting up Bootstrap 4.5.0, I decided to experiment with customizing the styles of tooltips. The code snippet below shows how I attempted this. Initially, I included the necessary stylesheets at the top of the page: <link rel=&q ...

htmlcsstwitter-bootstrapbootstrap-4tooltip

Ensure consistent switching of flexbox directional layout

I'm attempting to create a unique layout using only css3. My challenge is to achieve this without explicitly setting sizes, allowing the layout to flow freely. I am utilizing flexbox in my css for this purpose. After an automatic wrap, I want the layo ...

htmlcssflexbox

Enhancing link functionality with jQuery on a dynamically generated server page

I am facing an issue with my navigation menu that includes dropdowns. On desktop, the parent items need to be clickable as well, which is not a problem. However, for it to be responsive on mobile devices, I need to account for the lack of hover capability. ...

javascriptjqueryhtml

Searching for nested divs with the same class name in jQuery can be achieved by using the

Need assistance in locating all divs with a specific class name. Some divs may have nested divs with the parent div's class name. Take this scenario for example: <div class="myForm"> <div class ="myDiv"> <div class ="myDiv"> ...

javascriptjqueryhtml

An issue has been detected where the bullet list is uneven due to the CSS property/value columns being set

Is there a more effective way to split a bulleted list into two columns than the method I am currently using and ensure that the columns are aligned at the top? .hand-bullet-list ul{ list-style-type: none; margin-left: 0px; } .hand-bullet-list ...

htmlwordpresscsscss-multicolumn-layout

Display information from a MySQL database in a tabular format using PHP

I am currently learning PHP and attempting to retrieve data from a database to display it in an HTML table. However, I am facing an issue where the total number of records returned is 13 but only 12 records are being displayed in the table (it seems to be ...

phpmysqlhtml

In JavaScript, the condition can function properly even without the "&&" logical operator, but if the "&&" is included, the condition does not operate

I need the error message to be shown if the character length in the #nameT id is less than 3 or greater than 20. When I use the && logical operator, it does not function correctly, as when the && is not present, it works perfectly when ex ...

javascripthtmlcssdomlogical-operators

Tips for organizing a dashboard design with Bootstrap

I am looking to design a dashboard using the Bootstrap grid system. Here is the layout I have in mind: https://i.sstatic.net/cqWP5.jpg What would be the optimal way to structure this in the HTML file? Would a layout of 5 rows and 2 columns work best? Th ...

htmlbootstrap-5

Importing ReactDOM alone does not result in the rendering of anything

Having just started delving into the world of React, I've been grappling with getting a React app up and running. Despite my efforts, all I can manage to see is a blank page. Can anyone offer some assistance? HTML Markup (index.html) <html> & ...

javascripthtmlreactjs

Error alert: The system could not locate Google when trying to drop pins

Every time I attempt to place pins on the map, I encounter the "google is not defined" error. The map itself displays without any issues until I add the lines following the initMap() function. I have come across similar posts but none of the suggested so ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

When zoomed in, the div background gives off a crisp white appearance

When I zoom in on a div with a background color or border, it appears completely white. Strangely, this issue doesn't happen when I zoom in on the Facebook site. This picture illustrates the problem more clearly. What could be causing this issue? H ...

htmlcssbackground

JavaScript file slicing leads to generating an empty blob

I am currently working on a web-based chunked file uploader. The file is opened using the <input type="file" id="fileSelector" /> element, and the following simplified code snippet is used: $('#fileSelector').on('change', functio ...

javascripthtmlchunking

Why isn't my margin: auto code centering correctly?

My current struggle involves centering a div within the document. While I have successfully achieved horizontal centering, vertical centering remains elusive: width: 950px; height: 630px; background: #FFFFFF; margin: auto; Is it not expected that margin: ...

htmlcss

Scaling CSS images to fit within a specific area without distorting them

Is there a way to ensure that an image fits within a specified area using CSS or other methods? For example, if I have images of various sizes and want them all to fit into a div of 150px by 100px without stretching or distorting them. I just want the imag ...

cssoverflowscaledistortion