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

Arranging elements and buttons inside of components to create a cohesive design

My React application consists of two components: Open and Save. The Save component has a button labeled as saveButton. On the other hand, the Open component contains an openButton, as well as a stopButton and executeButton that are conditionally displayed ...

htmlcssreactjs

What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure: .topbar-container { width: 100%; position: fixed; top: 0; background-color: #2d3e50; z-index: 999; display: flex; transition: height 500ms; } @media (min-width: 992px) { .topbar-cont ...

javascripthtmlcss

Title size in css

<div class="products_list products_slider"> <ul> <li> <a id="ContentPlaceHolder1_rptCategoryProducts_hlProductImg_0" class="product_image" href="/Urun/Oyuncak/woodoy-100-parca-kovali-ahsap-oyuncak-bloklar/7078"> <div class="produ ...

css

MailJet experienced a template language issue while trying to send a message with Template [ID]

While running a test on a MailJet email template that includes a basic custom HTML code block, an error occurs in the received test email. (The live preview in the browser functions correctly) From [email protected]: An issue with the template lang ...

htmljsonfor-loopobjectmailjet

Tips for transferring PHP variable from a drop down menu

Hello, I am currently working on creating a dropdown menu using the <select> tag. My goal is to have it so that when someone clicks on one of the options in the dropdown, a new window opens. Additionally, I want the PHP variable from the main page to ...

phpjavascripthtml

Exploring Grails Assets, Redirections, Secure Sockets Layer, and Chrome

Using Grails 2.1.1 with the resources plugin, I have encountered an issue when incorporating the jstree library which comes with themes configuration: "themes":{ "theme":"default", "dots":false, "icons":true } The JavaScript in the library locat ...

javascriptcssgrailsjstree

Only one admin account can be accessed at a time by multiple logins

I am looking to add a new feature to my app where only one admin can log in at a time. If someone else tries to log in with the same admin ID on another device, a warning should be shown, indicating that the user is already logged in and cannot access the ...

htmlreactjs

Enhance your website by adding a personalized touch with unique hover

<html> <body> <a href="test.html" style="{color: blue; background: white} :visited {color: red} :hover {background: red} :visited:hover {color: red}"> Test </a> </body> </html> What i ...

htmlcss

What steps do I need to take to ensure the CSS hover effect functions properly?

After conducting a simple test underneath the main divs, I found that it works as intended. However, the primary one is not functioning properly. I attempted to apply the class "services-icon" to the div containing the image, but it still did not work. I ...

htmlcss

Leveraging Spotify's webAPI to listen to a randomly selected album by a specific artist (ID

Welcome to my little project! As I am not a developer myself, please bear with me for any silly questions that may arise. My idea is to create an "audio book machine." The concept involves using a website that showcases various artists of audiobooks. Upo ...

htmlnode.jsasp.net-web-apiraspberry-pispotify

The amazing feature known as "CSS3 background-clip"

Seeking a solution for restricting a background image to the text within an h2 element using -webkit-background-clip. Wondering if -moz-background-clip functions in the same way as -webkit-background-clip. As it currently only works in webkit browsers, it ...

css

Create a webpage layout using Bootstrap that features a left-aligned image within a div, with

Is there a way to achieve this layout using Bootstrap? View the desired design I am looking to create a div with an image on the left (float:left) and text (which could be one or multiple lines) along with a button aligned to the bottom right. The goal i ...

csstwitter-bootstrapcss-floattwitter-bootstrap-2

Creating flexible items with a 1:1 ratio and ensuring that the padding on the left and right of the flex container remains consistent

Whenever I adjust the size of the window, the flex-container ends up with uneven padding on the left and right, which is less than ideal. So, I am looking for a way to allow the flex-item to resize when the window size changes, ensuring that the conta ...

javascripthtmlcssreactjsflexbox

Are you struggling with Grails - Ajax submission not functioning properly?

Trying to update a div when a form is submitted, but it seems like something is missing. Here's the HTML code: <%@ page contentType="text/html;charset=UTF-8" %> <html> <head> <meta name="layout" content="main" /> ...

javascriptjqueryhtmlajaxgrails

Is there a way to activate the autoplay feature for this?

I'm really new to Jquery and most of this code isn't mine, I'm just using it as a learning tool for creating sliders. If someone could give me some guidance on how to make this slider work automatically when the page loads, that would be gre ...

javascriptjqueryhtmlcss

executing a controller method in AngularJS

Looking to trigger a controller function from a directive tag. Check out this demo: https://jsfiddle.net/6qqfv61k/ When the 'Export to Excel' button is clicked, I need to call the dataToExport() function from appCtrl since the data is ready for ...

htmlangularjstwitter-bootstrap

React JS - Large image failing to display entirely

I'm currently facing challenges with displaying my image in full size. I am unsure what is causing this issue and would appreciate any guidance on correcting my approach. The specific image I am attempting to display at full-size can be found Howeve ...

cssreactjs

Instructions for concealing and revealing a label and its corresponding field before and after making a choice from a dropdown menu

Currently, I am working on developing a form that will enable customers to input their order information. This form includes a selection list for payment methods, with three available options. If the user chooses either credit or debit card as the paymen ...

javascriptphphtml

"Unlocking the Power of CK Editor for Maximizing Value and Effectively Managing

I have a form with a field titled Description. I am using CKEditor to pass the value entered into this field and store it in my database. Can someone assist me with this? Below is the code snippet: <div id="descriptionMore" style="margin-bottom:20px; ...

javajavascriptjqueryhtmlliferay

Differentiating between inline and block elements in HTML5

Can you explain the various categories of inline and block elements in html5? I'm having trouble distinguishing between the different types of inline and block elements in html5. ...

html